超鏈接是網頁核心內容，交互設計是關鍵細節。CSS 提供偽類選擇器，但多數網站僅止於顏色變化、底線切換。W3C 官網展示了更高級的交互：粗底線（2px）、異色底線、點擊下沉動畫。本文拆解實現原理並提供完整代碼。

效果拆解與原理分析

1. 底線實現：非 `text-decoration`，而是 `border-bottom: 2px solid #f00` + `padding-bottom` 拉開文字距離，顏色可獨立控制
2. Hover 變色：`:hover` 改變 `border-bottom-color`（如 #00f）
3. Active 下沉：`:active` 觸發 `position: relative; top: 1px` 向下位移 1px，產生按壓錯覺，`outline: 0` 移除瀏覽器默認聚焦框

完整代碼實現

HTML 結構

<div>
  這裡是演示文字，<a href="#">鏈接在這裡</a>，更多文字...
</div>

CSS 樣式

div { width: 300px; margin: 20px auto; line-height: 24px; }
div a { text-decoration: none; color: #000; padding-bottom: 1px; }
div a:link, div a:visited { border-bottom: 2px solid #f00; }
div a:hover { border-bottom: 2px solid #00f; }
div a:active { border-bottom: 2px solid #00f; outline: 0 none; position: relative; top: 1px; }

`line-height` 防止底線干擾下行文字；`outline: 0` 防點擊出現邊框。

發散變體：可交互的「刪除線」效果

調整 `height` 讓邊框穿過文字中部，配合 `display: inline-block` 保持行內塊特性，`overflow: visible` 保證文字可見。

div a { text-decoration: none; color: #000; padding-bottom: 1px; height: 6px; display: inline-block; }

注意：`a` 是行內元素，直接設 `height` 無效；`display: block` 會脫離文本流，故需 `inline-block`。早期 IE 兼容性較差。

結語

幾行 CSS 實現優雅交互，平時多一點細心與發散思維，持續提升用戶體驗。