Widely available 安全に使用可能。下線付きリンクの可読性向上に特に有効。

text-underline-offset

text-underline-offset は CSS のプロパティで、 (text-decoration を使用して適用された) 下線のテキスト装飾線の本来の位置からのオフセット距離を設定します。

装飾テキスト

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-underline-offset
87
87
70
12.1
87
12.2
auto
87
87
70
12.1
87
12.2
percentage

パーセント値
87
87
74
18.2
87
18.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

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

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

ライブデモ

offset: 2px

text-underline-offset Offset: 2px demo.

プレビュー全画面表示

offset: 6px

text-underline-offset Offset: 6px demo.

プレビュー全画面表示

offset: 0.3em

text-underline-offset Offset: 0.3em demo.

プレビュー全画面表示

実務での使いどころ

  • リンクの可読性向上

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

注意点

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

アクセシビリティ

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

参考リンク