リンクの下線をもっと見栄え良くする：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 を使っていた方法と比べると、この書き方のほうがセマンティクス的にも明確で、メンテナンスもしやすい。

もともとは単なるドラフト段階だった多くの標準仕様が、各ブラウザに次々と実装されていくのを見ると、本当に時代が進歩している実感が湧くな。