如何减少元素边框的长度？

Question

我的问题非常简短明了..我想要一个比这更短的分隔符：

.myclass{
   border-left: 1px solid;
  margin-left: 4px;
  padding-left: 4px;
  height: 3px;
}

<span>Age</span><span class="myclass">21</span>

这是预期的输出：

如您所见，我设置了height: 3px，但span的高度仍高于3px。如何缩短边框？

Answer 1

我猜你试图减少边框的高度，不一定要降低span标签（包含文字）的高度。

在这种情况下，您可以简单地使用一个伪元素（如::before），您可以使用CSS控制更多。

＆＃13;

＆＃13;

.myclass::before {
  content: '';
  display: inline-block;
  height: 3px;
  width: 1px;
  background: #000;
  vertical-align: middle;
  margin-right: 5px;
}

＆＃13;

<span>Age</span> <span class="myclass">21</span>

＆＃13;

＆＃13;

＆＃13;

注意这条线是如何高3px。

Answer 2

设置内联元素的高度无效。添加display: inline-block;以尊重height: 3px;

Answer 3

保持简单。只需使用| HTML中的字符。

Demo

<span>Age |</span>
<span class="myclass">21</span>

.myclass {
  padding-left: 4px;
  height: 3px;
}