Widely available 安全に使用可能。下線付きリンクの可読性向上に特に有効。
タイポグラフィ Widely available

text-underline-offset

text-underline-offset は下線とテキストの間の距離を制御する。デフォルトでは下線が文字のディセンダー（g や y の下部分）と重なることがあるが、このプロパティで適切な距離を設けることで可読性を向上させる。

装飾テキスト

概要

text-underline-offset は下線とテキストの間の距離を制御する。デフォルトでは下線が文字のディセンダー（g や y の下部分）と重なることがあるが、このプロパティで適切な距離を設けることで可読性を向上させる。

対応ブラウザ

デスクトップ

Chrome 87+
Edge 87+
Safari 12.1+
Firefox 70+

モバイル

Chrome Android 87+
Safari iOS 12.2+
Firefox Android 79+

基本構文

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

a:hover {
  text-underline-offset: 2px;
}

実務での使いどころ

  • リンクの可読性向上

    下線とテキストの間にスペースを設け、ディセンダーとの重なりを防いで読みやすくする。

注意点

  • 大きすぎるオフセット値は、下線がテキストから離れすぎて関連性が分かりにくくなる。

アクセシビリティ

  • 下線がリンクの識別に使われている場合、オフセットを大きくしすぎるとリンクであることが分かりにくくなる可能性がある。

参考リンク