超リンクの下線をもっときれいに見せる：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 を使うやり方に比べると、この書き方のほうが意味が明確で、保守もしやすい。

もともとは草案にすぎなかった標準が、各ブラウザにひとつずつ実装されていくのを見ると、本当に時代が進んでいるんだなという実感がある。