Html 如何编写居中的短下划线？

我必须对此进行模拟，我想到了两种方法：

背景图像与线条

添加另一个高度为1px的元素，顶部/底部边框为绿色。我甚至可以使用：after选择器来执行此操作

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

---

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

我喜欢伪元素，所以这正是我在这里要使用的

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

---

我喜欢伪元素，所以这正是我在这里要用到的

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

---

从技术上讲，使用：after并没有添加额外的元素。所以我建议你使用第二种方法，“语义”是什么关于下划线装饰？对于居中下划线，我们通常使用

边框顶部

或

边框底部

，这取决于具体情况，但我不知道您的代码，因此，如果您的问题无法通过border属性解决，我建议您共享代码或使用@Paulie\u D下划线装饰，但这不具有任何语义。非语义的是必须添加元素才能进行技术性操作，使用：after不是添加额外的元素。所以我建议你使用第二种方法，“语义”是什么关于下划线装饰？对于居中下划线，我们通常使用

边框顶部

或

边框底部

，这取决于具体情况，但我不知道您的代码，因此，如果您的问题无法通过border属性解决，我建议您共享代码或使用@Paulie\u D下划线装饰，但这不具有任何语义。不是语义的是必须添加元素才能做到这一点