css下划线怎么跟随文字

下划线是文本排版中常用的一种修饰方式，CSS中也提供了多种下划线的实现方式，其中一种是让下划线跟随文字移动。

实现这种下划线的方式是利用 :after 伪元素，在文本后面添加一个下划线，并利用 transition 属性控制下划线跟随文字移动。

.text {
  position: relative;
}

.text:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(-1 * 0.3em);
  width: 100%;
  height: 1px;
  background-color: #000;
  transition: transform 0.2s, opacity 0.2s;
  transform: scaleX(0);
  opacity: 0.5;
}

.text:hover:after {
  transform: scaleX(1);
  opacity: 1;
} 

上述代码中，利用 position: relative; 让文本容器成为父元素，然后用 :after 伪类在文本后面添加一个下划线。其中，bottom: calc(-1 * 0.3em); 将下划线定位到文本底部，width: 100%; 让下划线的宽度与文本宽度一致，height: 1px; 控制下划线的高度为1像素，background-color: #000; 设置下划线颜色为黑色。

利用 transition 属性控制下划线跟随文本移动，即鼠标悬浮在文本上时，通过 :hover 伪类对下划线进行样式的变化，让下划线 transform: scaleX(1); 横向放大到与文本宽度一致，opacity: 1; 将下划线的透明度设置为1，让下划线跟随文本移动。