css下划线有下划线

CSS 下划线是我们常常会用到的样式之一。下划线的用处很多，例如可以用于链接、标题等在网页上的文本显示中。在 CSS 中，我们可以通过 text-decoration 属性来设置文本下划线的样式。

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

上面的代码就表示为 class 为 text-underline 的元素添加下划线样式。

但是，有时候我们需要的是一个下划线下面还有另外一条下划线的样式。比如在一个表格中需要让表格标题文字有一个下划线和一个横线的效果。

.title{
  text-decoration: underline;
  border-bottom: 2px solid black;
}

上面的代码实现了标题下有一条黑色的横线和一个下划线的样式效果。通过设置元素的 border-bottom 属性，我们可以很容易地实现这样的效果。

除了这种方式，使用 ::before 和 ::after 伪类元素也可以实现同样效果。

.title::before{
  content: "";
  display: block;
  height: 1px;
  background-color: black;
}
.title::after{
  content: "";
  display: block;
  height: 1px;
  border-bottom: 1px solid black;
  margin-top: 5px;
}

上面的代码中， ::before 等同于在标题前面增加一个空的元素， ::after 则等同于在标题后面增加一个空的元素。通过设置高度和样式，我们可以完成下划线下还有一条横线的效果。

总而言之，使用 CSS 实现下划线下还有一个横线的效果有多种方式，可以根据自己的需求选择最合适的实现方式。