CSS下劃線滑過效果是一種非常常見的頁面交互效果。當用戶將鼠標懸停在文本上時，文本下面會出現一條下劃線，這種效果可以讓用戶更加清晰地識別出可以點擊的文本，提高頁面的可用性。

a {
position: relative;
text-decoration: none;
color: #333;
}
a:after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background-color: #333;
transform: scaleX(0);
transition: transform 0.2s ease-out;
}
a:hover:after {
transform: scaleX(1);
}

以上是一段實現CSS下劃線滑過效果的代碼，其中使用了::after偽元素和transform屬性。首先，將鏈接的text-decoration設置為none，這是為了隱藏原來的下劃線。接著，使用::after偽元素創建一個條形框，將其放置于鏈接底部，設置背景顏色為黑色，寬度為100%，高度為2像素。然后，使用transform屬性將該條形框初始狀態的“長度”縮放為0。最后，使用:hover偽類實現鼠標懸停效果，并通過transform屬性將條形框的長度調整為100%（即原始長度）。

使用這種CSS下劃線滑過效果可以大大提高頁面的可用性，并優化用戶的交互體驗。如果您有需要，可以在CSS中靈活運用這個效果，為您的網頁增添些許新意。