css下划线怎么跟随文字长度

在Web开发过程中，经常需要在文字下方添加下划线来突出重点文字，但是当文字长度不同的时候，下划线的长度也需要跟随文字长度的变化。那么该如何实现这个效果呢？

这里介绍一种使用CSS实现的方法：

下划线样式：
.underline {
    border-bottom: 1px solid #000;
    display: inline-block;
    margin-bottom: -1px;
} 

首先，我们需要定义下划线的样式，这里我们使用border-bottom来实现下划线效果。同时为了让下划线紧贴文字下方，在样式选择器中添加margin-bottom: -1px;。

文字和下划线容器样式：
.text-wrapper {
    display: inline-block;
    position: relative;
} 

接下来，我们需要创建一个容器来包含文字和下划线，以便在容器中控制下划线的长度。在这个容器的样式中，我们可以使用display: inline-block;将其变成块级元素，以便在横向上占用一定的宽度。

在文字和下划线容器中添加伪元素：
.text-wrapper:after {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
} 

但是单纯使用这种方式，我们只能实现下划线的长度始终与容器的宽度相等，无法跟随文字长度的变化。为了解决这个问题，我们在容器中添加一个伪元素，通过伪元素实现下划线的长度跟随文字长度的变化。其中，伪元素的top属性设置为100%，使其在容器的下方。伪元素的width属性设置为100%，使其占据容器的整个宽度。

使伪元素的宽度为文字的宽度：
.text-wrapper:after {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 1px;
}
.text-wrapper:hover:after,
.text-wrapper:focus-within:after {
    width: 100%;
} 

伪元素的初始宽度为0，当文本容器获得焦点或者鼠标悬浮在上面时，伪元素的宽度会以动画的方式平滑地变成和容器的宽度相等，从而实现下划线跟随文字长度的效果。

上述代码就是实现下划线跟随文字长度的CSS代码，通过这种方式，我们可以使下划线始终紧贴文字下方，并且随着文字长度的变化而自动调整下划线的长度。希望对你的网页设计和开发有所帮助。