如何在没有文本装饰的文本下方制作一行：下划线？ [复制]

Question

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

我们做什么

Answer 1

您可以使用Border-Bottom 和一些Padding-Bottom。

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

<a>Example Text</a>

您也可以使用伪元素，使用 after 或 before 在文本或其他任何内容下添加一行。

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

边框底部：

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

<span>What we do</span>