CSS下劃線在網頁設計中非常常用，特別是在鏈接和菜單導航中。然而，如果每次鼠標懸停在下劃線的鏈接上時，下劃線瞬間變亮或消失，頁面看起來會很單調。這里我們介紹一個簡單而漂亮的效果：下劃線淡入淡出。

/* CSS代碼 */
a {
text-decoration: none; /* 文字去下劃線 */
position: relative; /* 使下面的子元素相對于其父元素定位 */
}
a:after { /* 定義hover后的效果 */
content: ""; /* ::after用來創建一個偽元素，這里是用來制作下劃線的 */
height: 2px;
width: 100%;
background-color: #000;
position: absolute; 
bottom: 0;
left: 0;
visibility: hidden; /* 處于隱藏狀態 */
opacity: 0; /* 透明度為0 */
transition: visibility 0s, opacity 0.3s ease-in-out; /* 過渡效果, 先視覺動作后透明度變化*/
}
a:hover:after { /* hover時觸發下劃線的動畫效果 */
visibility: visible; /* 可見 */
opacity: 1; /* 不透明 */
}

代碼中我們使用了偽元素::after來制作下劃線。我們先將下劃線設為隱藏狀態，通過CSS3的動畫效果在hover時產生可見、不透明的效果。

本文介紹了一個簡單而美觀的下劃線效果，希望對網頁設計的小伙伴們有所啟發。