CSS下划线跟随是一种很酷炫的效果，可以为网页增加一些动态的装饰性。下面我们将学习如何使用CSS实现下划线跟随的效果。

// HTML代码
<p>Hello, world!</p>
// CSS代码
p {
position: relative;
}
p::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #333;
transition: width 0.3s;
}
p:hover::after {
width: 100%;
}

首先，在HTML中，我们需要为段落元素添加一个相对定位的属性。接着，在CSS中，我们使用伪元素::after来创建一个下划线的效果，并设置bottom: 0;和left: 0;来让它在段落元素底部左侧开始。然后，我们设置transition: width 0.3s;来让下划线的宽度平滑变化。最后，当鼠标移动到段落元素上时，我们通过:hover伪类为::after设置width: 100%;，从而实现下划线跟随的效果。

需要注意的是，如果我们在段落元素的CSS样式中设置了text-decoration: underline;，就会覆盖掉下划线跟随效果。我们可以通过text-decoration: none;来取消下划线。

以上就是CSS下划线跟随的简单介绍和实现方法，希望对大家有所帮助。