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

Question

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

1. 与线的背景图像
2. 添加另一个1px高度的元素,带有绿色顶部/底部边框.我甚至可以使用:after选择器来做到这一点

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

有没有添加元素或图像的方法？

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;
}