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

Question

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

例如：

首页|关于

但我想要|要短一点。

Answer 1

您无法根据需要设置border属性。但是，在这里使用伪元素可能很有用（see exaggerated live example）：

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

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