如何在CSS中为文本加下划线

在CSS中为文本加下划线是一种常见的需求，可以用于标记重要信息或用作链接效果。下面介绍三种方式实现这一效果。

1. 使用text-decoration属性

可以使用text-decoration属性为文本添加下划线。具体实现方式如下：

.text-underline {
  text-decoration: underline;
}

此时，.text-underline类应用到的文本将会显示下划线。

可以通过text-decoration的属性值来控制下划线的样式，如dotted、dashed、double等等，具体可参考text-decoration的MDN文档。

2. 使用border-bottom属性

另一种实现方法是使用border-bottom属性。具体如下：

.text-underline {
  border-bottom: 1px solid black;
}

这种方法可以控制下划线的样式、粗细、颜色等。

需要注意的是，若.text-underline类应用于行内元素，此时border-bottom将会被限制在这一行内，而不是整个文本之下。

3. 借助伪元素before或after

除了上述两种常见实现方式外，还可以使用伪元素before或after来实现下划线效果。具体实现如下：

.text-underline:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: black;
}

这里的原理是在.text-underline类中使用了伪元素after来添加一个块级元素，并为其添加样式来实现下划线效果。

需要注意的是，利用伪元素after来实现下划线效果可能会在一些特定情况下出现问题，如文本末尾处理不当等问题。

总结

以上介绍了三种常见的CSS实现方式，分别是：

1. 使用text-decoration属性
2. 使用border-bottom属性
3. 借助伪元素before或after

三种方式各有优缺点，实际应用中应选择最适合的方法。