淘先锋技术网

首页 1 2 3 4 5 6 7

在CSS中,下划线是一个常见的文本装饰方式。可以通过text-decoration属性将文本加上下划线,也可以通过border-bottom属性设置下划线的样式和颜色。


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

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

css经过加下划线

然而,有时候我们需要在下划线下面再添加一个下划线,这时候该怎么办呢?

在CSS中,我们可以使用::after伪元素来实现这个效果。将原来带下划线的文本元素设置position:relative,然后使用::after伪元素来添加一个新的下划线。


.double-underline {
  position: relative;
}

.double-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  border-bottom: 1px solid #000;
}

需要注意的是,使用::after伪元素添加的下划线不会影响原来文本元素带的下划线,两者是独立的。

总之,CSS中的下划线是一个非常常用的文本装饰方式,而通过使用::after伪元素,我们可以很方便地在下划线下面再添加一个下划线,从而实现更加丰富多样的文本效果。