[分享]css下划线随内容变化

在网页开发中，有时我们需要在文字下方添加一条下划线，以突出该文字的重要性或者作为一个链接的样式展示。传统的做法是使用borderbottom来添加一条固定的下划线。但是，现在我们可以使用CSS的伪类...

在网页开发中，有时我们需要在文字下方添加一条下划线，以突出该文字的重要性或者作为一个链接的样式展示。传统的做法是使用border-bottom来添加一条固定的下划线。但是，现在我们可以使用CSS的伪类和滤镜等功能，来实现下划线随内容变化的效果。

首先，我们需要定义一个包含文字和下划线的容器：

<div class="underline">
  <span>这是一段需要有下划线的文字</span>
  <span class="underline"></span>
</div> 

其中，第一个span标签包含了需要添加下划线的文字，第二个span标签则是用来添加下划线的。我们将第二个span标签添加一个类名，在CSS中进行样式的设置。

.underline {
  position: relative;
}
.underline span.underline {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: #000;
} 

以上代码中，我们将容器设置为相对定位，为后面的伪类准备好位置参考。然后针对第二个span标签设置了位置和高度，使它在第一个span标签下方，并且宽度为100%，即占据了整个容器的宽度。设置了背景颜色之后，我们可以看到下划线已经完成了初始布局。

现在我们需要让下划线随文字变化。我们可以使用伪类::before或者::after来实现。在这里我使用的是::before伪类，代码如下：

.underline span.underline::before {
  content: attr(data-underline);
  position: absolute;
  width: 0;
  height: 2px;
  background-color: #000;
  transition: width .2s ease;
}

.underline:hover span.underline::before,
.underline span.underline:hover::before {
  width: 100%;
} 

以上代码中，我们为伪类::before设置了data-underline属性，这个属性的值就是下划线的内容。我们利用::before将它添加到了第二个span标签的内部，同时设置了它的初始位置（宽度为0），以及过渡效果。当鼠标悬停在容器上或者第二个span标签上时，我们通过:hover伪类来改变这条下划线的宽度，从而使它随文字的变化而动态展示。

需要注意的是，使用伪类时我们需要在容器的position属性上设置相对位置，以避免伪类无法定位或者定位错误。经过上面的设置之后，我们就可以实现下划线随内容变化的效果，从而使网页内容更加丰富多彩。