讓你的超連結底線更好看：text-underline-offset

大約在 2016 年的時候，如果想在超連結下面加入底線，通常會在 CSS 加上 text-decoration: underline 這個屬性。

預設的情況下底線跟文字很接近，有些設計師不喜歡這種樣式，我自己也覺得沒有很好看。underline 的位置跟粗細並不能調整，在這種情況下通常會用 background-image 來處理。

透過 linear-gradient，我們可以在模擬一條類似 underline 的直線，既然他是 background-image，代表我們可以直接用 background-position來調整位置，也可以用 background-size 來調整粗細。

雖然是解決了底線位置無法調整的問題，但實際使用上難免會覺得有些麻煩，而且感覺也有點偏離 background-image 原來的用法。當然要用也是完全沒有問題的，只是沒那麼直覺。

text-underline-offset

這個 CSS 屬性在很早之前就已經提出，只是當時支援的瀏覽器相當少，導致大家都還是在用 background-image 的方式調整底線位置。

現在主流瀏覽器都已經支援這個屬性了，用法非常直觀：

a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

如果想要更精細地控制底線樣式，還可以搭配 text-decoration-thickness 調整粗細：

a {
  text-decoration: underline;
  text-decoration-color: #3b82f6;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

比起以前用 background-image 的做法，這種寫法語意更清楚，維護起來也更方便。

看到很多原本都只是草案的標準一一被各個瀏覽器實作，真的有種時代在進步的實感呢。