html - 有没有办法设置边界线高度？

Question

您可以使用border-right-width 属性控制边框的宽度。有没有办法像边框右高度一样设置它的高度？

例如：

首页|关于

但我想要 | 要短一点。

Answer 1

您无法根据需要设置border属性。但是，在这里使用伪元素可能很有用（请参阅夸张的现场示例）：

HTML（可能——其他配置也是可能的）

<div class="menu"><span>Home</span><span>About</span><span>Last</span></div>

CSS

.menu span {font-size: 2em; padding: 10px; position: relative;}

.menu span:after {content: ''; position: absolute; right: 0; top: .6em; bottom: .6em; width: 1px; background-color: black;}

.menu > span:last-child:after {display: none;}

Answer 2

这将与元素本身的高度有关 - 而不是边框​​。

Answer 3

除了边框的宽度、样式和颜色之外，没有其他方法可以设置。如果要使边框看起来与文本的高度不同，则需要在这两个元素之间添加一个元素并以这种方式调整其高度和垂直对齐方式。根据您正在使用的代码，您可能最好使用背景图像。