如何编码居中的短下划线？

Question

我必须对此进行模拟，但我有两种方法可以做到：

1. 带背线的背景图片
2. 添加1px高度的另一个元素，带有绿色顶部/底部边框。我甚至可以使用：after selector
来做到这一点

但我不相信这两个中的任何一个。第一个因为它需要一个额外的图像，第二个因为它意味着添加一个额外的元素，这在语义上是不正确的。

没有添加元素或图像有什么办法吗？

Answer 1

我喜欢伪元素，这正是我在这里使用的。

h1{
   position:relative;
}

h1:after{
   content:"";
   position:absolute;
   width:20%;
   border-top:1px solid green;
   bottom:0;
   left:40%;
}

如果您希望下划线为固定宽度，则需要使用负边距将其置于中心位置。

h1:after{
   content:"";
   position:absolute;
   width:100px;
   border-top:1px solid green;
   bottom:0;
   left:50%;
   margin-left:-50px;
}