[分享]css做出下划线

CSS中给文字添加下划线是非常简单的。下面我们给大家介绍一下实现方法：

/*方法一：使用border-bottom*/
.underline {
  border-bottom: 1px solid black;
}

/*方法二：使用text-decoration*/
.underline {
  text-decoration: underline;
}

/*方法三：使用伪元素*/
.underline {
  position: relative;
}
.underline::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: black;
} 

以上三种方法均能够实现给文字添加下划线的效果。其中，第一种方法使用的是border-bottom属性来设置下划线样式和颜色；第二种方法使用的是text-decoration属性，该属性还能够实现其他文字修饰效果；第三种方法使用的是伪元素，使用伪元素可以让我们更加灵活地控制下划线的位置和样式。

在使用以上任意一种方法添加下划线的时候，我们需要注意一些细节问题。比如，我们需要给文字所在的标签添加类名，以方便我们使用CSS选择器；还要注意下划线的粗细、颜色、位置等问题。

总之，CSS能够实现的下划线效果非常多样化，我们可以根据实际情况选择最适合自己的方法。希望本文对您有所帮助！