CSS是一種樣式語言，可以用于美化網頁的外觀和布局。在網頁中，經常需要用到下劃線來突出某些文本內容。今天，我們要介紹的是如何使用CSS使下劃線在點擊時變長。

a {
text-decoration: underline;
transition: all 0.3s ease; /*過渡效果*/
}
a:hover {
text-decoration: none;
border-bottom: 2px solid blue; /*底部邊框*/
padding-bottom: 2px; /*給下方留空*/
}

如上所示，我們對a標簽進行了樣式設置。首先，我們設置了下劃線的樣式，使其在沒有被點擊時呈現出來。接著，在hover狀態下，我們取消了下劃線的樣式，換成了底部邊框，并給底部邊框留下一定的空隙。這樣，當用戶點擊鏈接時，底部邊框就會擴展到被空隙擠開的位置，從而產生了下劃線變長的效果。

需要注意的是，我們給底部邊框設置了過渡效果，使其變化更加柔和自然。如果您需要更多的交互動效，可以適當增加過渡時間或修改過渡曲線，以達到更好的視覺效果。

當然，這只是CSS下劃線變長的一種方法。在實際項目中，您可以根據自己的需要進行多種樣式的組合。無論何種方式，保持簡潔明了的代碼結構是最重要的。