如何在没有文本修饰的情况下在文本下面创建一行：下划线？

Question

我需要在文字下方添加一行，而不是 text-decoration：underline; 否则如何在文本和行之间创建自定义空格。

我们做什么

Answer 1

您可以将Border-Bottom与Padding-Bottom一起使用。

a {
border-bottom: 1px solid black;
padding-bottom: 5px;
}

<a>Example Text</a>

此外，您可以使用伪元素，在文本或其他任何内容之后使用之后或之前使用。

a::after {
 display: block;
   content: '';
  width: 100%;
  height: 1px;
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
}

a {
position: relative;  
}

<a>Example Text</a>

Answer 2

<强>边界底部：

＆＃13;

＆＃13;

span{
  border-bottom:1px solid #000;
}

＆＃13;

<span>What we do</span>

＆＃13;

＆＃13;

＆＃13;