CSS是一種強大的樣式語言，可以為網頁中的元素添加各種各樣的樣式。其中，下劃線是一種常見的裝飾效果，可以讓文本更加突出。而當鼠標滑過這些下劃線時，也可以通過CSS來設置特效，使頁面更具交互性。

/* 設置下劃線樣式 */
.underline {
text-decoration: underline;
}
/* 設置下劃線鼠標滑過樣式 */
.underline:hover {
text-decoration: none;
background-image: linear-gradient(to right, #000, #000);  /* 背景為黑色漸變 */
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% 0.2em;  /* 寬度為100%，高度為0.2em */
}

在上面的代碼中，我們使用了text-decoration屬性來設置下劃線樣式。當鼠標滑過時，我們將這個屬性設為none，同時為元素添加一個背景，這個背景是一個從左到右的黑色漸變。我們將這個背景的位置放在了文本底部，這樣就可以達到下劃線的效果。同時，我們將這個背景的重復方式設為no-repeat，這也保證了我們只有一條下劃線。最后，我們設置了這個背景的大小，確保它的寬度為100%（與文本長度相同），高度為0.2em（一般情況下，下劃線的高度會比字體稍微低一些）。

有了這些設置，我們就可以讓頁面中的文本在鼠標滑過時，顯示出漂亮的下劃線特效了。