CSS下劃線動畫是一種常見并且有點趣味性的效果。它可以讓一些文字、鏈接等在鼠標懸停的時候出現下劃線動畫，從而增加一些變化。下面就來講講如何實現這個效果。

/* 基礎樣式 */
a {
position: relative;
color: #333;
text-decoration: none;
}
/* 偽類樣式 */
a::before {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: #333;
opacity: 0;
transition: all 0.2s ease-in-out;
}
/* 懸停樣式 */
a:hover::before {
width: 100%;
opacity: 1;
}

在這個代碼里，我們先給a添加了一些基礎的樣式，把字體顏色一級下劃線都去掉了。然后在a的偽類樣式里添加了一個before，通過position和bottom來把下劃線放在文字下方。此時width還是 0，就是不可見的狀態，所以opacity設置成了 0，也就是完全透明。這里我們還添加了一個transition屬性，用于實現平滑的過渡效果。

最后就是添加懸停時的樣式，觸發事件之后就看到下劃線動起來啦！我們在a:hover里使用::before選擇器，把之前的width設置成 100%，同時把opacity設置成 1，這樣就會有一個下劃線從左向右伸展，覆蓋整個文字。

通過這個簡單的代碼，我們就實現了一個有趣的 CSS 下劃線動畫效果！