CSS 漂亮底線寫法：螢光筆標記、滑過展開的連結底線與 text-decoration 新屬性

網頁上最常見的底線，是連結下面那條細細的線。其實用 CSS 可以把底線變得更有設計感：換顏色、變粗、離文字遠一點，或做成像螢光筆畫過的效果。這篇整理三種寫法，從最簡單的開始。

寫法一：用 text-decoration 調整原本的底線

以前想改底線的顏色、粗細，得先把底線拿掉，再用 border-bottom 模擬。現在可以直接調整：

a {
  text-decoration: underline;
  text-decoration-color: #f0cb35;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

• text-decoration-color：底線顏色，可以跟文字不同色。
• text-decoration-thickness：底線粗細。
• text-underline-offset：底線跟文字之間的距離，拉開一點比較不會壓到字。

這幾個屬性現代瀏覽器都支援。好處是文字換行時，每一行都會有底線，不用另外處理。

寫法二：螢光筆標記效果

這篇文章舊版分享的就是這種：用漸層背景在文字下半部畫一條色帶，看起來像用螢光筆畫過。滑鼠移過去時，色帶會長高蓋滿整段文字。

.highlight {
  color: inherit;
  background-image: linear-gradient(120deg, #ffedbc 0%, #f0cb35 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.3em;
  background-position: 0 100%;
  transition: background-size 0.25s ease-in;
}

.highlight:hover {
  background-size: 100% 100%;
}

<p>本週末全館<span class="highlight">買一送一</span>，歡迎來店選購。</p>

逐行說明：

• linear-gradient(120deg, #ffedbc 0%, #f0cb35 100%)：淺黃到金黃的斜向漸層，就是色帶的顏色。
• background-repeat: no-repeat：色帶只畫一次，不要重複鋪滿。
• background-size: 100% 0.3em：色帶寬度等於文字的寬度，高度是字級的 0.3 倍，數字改大色帶就更粗。
• background-position: 0 100%：色帶貼齊文字的底部。
• transition 搭配 :hover：滑鼠移過時，色帶在 0.25 秒內從底部長高到 100%，蓋滿整段文字。

舊版的程式碼還寫了 font-size: 20px; line-height: 19px;，行高比字還小，文字換行時上下兩行會擠在一起，建議拿掉，沿用段落原本的字級和行高。

要用在行內元素上

.highlight 要加在 span、a、mark 這類行內元素上，文字換行時每一行才都會有色帶。如果加在 p、div 這種區塊元素上，只會在整段的最下面畫一條。

用 mark 標籤標示重點

如果這段文字的意思是「特別標示的重點」，HTML 有一個專門的 mark 標籤。它預設是黃色背景，可以改成螢光筆的樣式：

mark {
  color: inherit;
  background: linear-gradient(120deg, #ffedbc, #f0cb35) no-repeat 0 100% / 100% 0.3em;
}

<p>報名截止日是<mark>10 月 31 日</mark>，逾期不受理。</p>

寫法三：滑鼠移過時，底線從左往右展開

常用在選單、按鈕文字：平常沒有底線，滑鼠移過去時，底線從左邊長出來。

.grow-underline {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size 0.3s ease;
}

.grow-underline:hover,
.grow-underline:focus-visible {
  background-size: 100% 2px;
}

• linear-gradient(currentColor, currentColor)：用跟文字一樣的顏色，畫一條實心的線。
• background-size：平常寬度是 0%（看不到），滑過時變成 100%，就是從左邊長出來的效果；2px 是底線的粗細。
• 想從中間往兩邊展開，把 background-position 改成 50% 100%。
• 加上 :focus-visible，用鍵盤 Tab 選到連結時也會出現底線。

無障礙的小提醒

• 內文裡的連結，平常就要看得出來：文章段落裡的連結，最好維持底線或明顯的顏色差異，讓人一眼知道可以點。「滑過才出現底線」比較適合選單這種大家都知道可以點的地方。
• 減少動態效果：作業系統開了「減少動態效果」的人，可以讓底線直接出現，不播放動畫：

@media (prefers-reduced-motion: reduce) {
  .highlight,
  .grow-underline {
    transition: none;
  }
}

延伸閱讀

• CSS 彩色條紋怎麼做？用 linear-gradient 做多色分段色條（附顏色寫法整理）
• 點連結出現外框怎麼拿掉？用 :focus-visible 取代 outline: none 的正確寫法
• CSS 流動漸層邊框怎麼做？會變色的彩色外框寫法（支援圓角，附程式碼）

底線、標記這些文字小細節，能讓重點一眼就被看見。正威網路行銷是 25 年經驗的基隆網頁設計工作室，提供客製化網頁設計、RWD 響應式網站與 SEO 搜尋引擎優化，歡迎來聊聊。