CSS 鼠標滑過下劃線是一種常用的頁面交互效果，通過 CSS 樣式實現鼠標滑過文本時在文本下添加一條下劃線，能夠有效的提升頁面的用戶體驗度。

/* CSS 樣式 */
a {
position: relative;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:hover::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 100%;
height: 2px;
background-color: #333;
}

在 CSS 樣式中，我們首先將 a 鏈接標簽的定位設置為相對定位，這樣才能方便地通過絕對定位添加下劃線。
然后在鼠標滑過 a 標簽時，我們對其 text-decoration 屬性進行了清除。因為默認情況下，a 標簽的下劃線樣式是從文本底部出發并連接到文本下端，通過清除 text-decoration 屬性可以消除這一默認樣式，為添加我們自定義的下劃線效果做好了準備。
最后我們通過使用 ::after 選擇器創建一個偽元素，并在其中添加了樣式。這個偽元素的 position 屬性設置為絕對定位，left 和 bottom 屬性用于定位偽元素在 a 標簽下方，width 屬性設置為 100% ，使偽元素的寬度與 a 標簽相同，height 屬性設置為 2px ，形成一條下劃線，background-color 屬性用于設置下劃線的顏色。