如果你想给你的网页文本增加一些动态效果，那么下划线动画是一个不错的选择。通过CSS，下划线可以变得更加生动，吸引更多的眼球。

.underline{
position: relative;
text-decoration: none;
}
.underline::after{
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background-color: #000;
transition: width .3s ease;
}
.underline:hover::after{
width: 100%;
}

如上所示的CSS代码段，您可以为任何文本创建下划线动画。首先，将链接的文本设定为相对定位，以便让下划线动画有一个基础点。接下来，为下划线添加一个::after伪元素，并设置其相对于文本的位置。在这里，底部的负边距将伪元素位置移到文本的下方，这样就可以在下方创建下划线了

然后，将宽度设置为0并设置过渡效果，使下划线动画的长度可以渐进式增长。最后，当鼠标悬停在文本上时，增加下划线的宽度，达到下划线动画的效果。

上述CSS样式对于文本中所有的链接元素都适用。所以，如果你想要对特定的链接添加不同的下划线动画效果，只需添加一个不同的类，然后为不同的下划线动画效果添加不同的CSS样式即可。