css下划线有几种

CSS下划线是网页设计中的一个常见需求，通过下划线可以突出显示某些文字内容，同时也可以美化页面。在CSS中，下划线有几种实现方式：

/* 第一种方式：使用text-decoration属性下划线 */
.text-underline {
  text-decoration: underline;
}

上述代码使用CSS的text-decoration属性来实现下划线。该属性有多种值可选，其中包括：underline（下划线）、overline（上划线）、line-through（穿过线）等。

/* 第二种方式：使用border-bottom属性下划线 */
.border-bottom-underline {
  border-bottom: 1px solid black;
}

此时，我们给需要下划线的元素添加一个border-bottom，它就会成为下划线的效果。需要注意的是，这种方式下，元素下方会存在一条横线，如果需要调整横线的长度，可以使用border-bottom-width属性。

/* 第三种方式：使用::before或::after伪元素下划线 */
.before-underline::before,.after-underline::after {
  content: "";
  display: block;
  border-bottom: 1px solid black;
}

通过使用::before或::after伪元素，我们可以在元素前后添加一条下划线。首先我们为::before或::after伪元素设置display: block属性，让它们成为块级元素，接着添加content: ""来使得该伪元素产生一些内容以触发渲染。最后，我们用border-bottom来绘制下划线。