Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

text-underline-position

text-underline-position は CSS のプロパティであり、text-decoration プロパティの underline の値で設定される下線（傍線）の位置を指定します。

下線位置テキスト装飾

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-underline-position
33
12
74
12.1
33
12.2
auto
33
79
74
12.1
33
12.2
from-font
87
87
74
12.1
87
12.2
left
71
79
74
18.2
71
18.2
right
71
79
74
18.2
71
18.2
under
33
79
74
12.1
33
12.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (9)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (9)

基本構文

CSS 
.clean-underline {
  text-decoration: underline;
  text-underline-position: under;
  text-underline-offset: 3px;
}

ライブデモ

Auto(default)

CSS Auto(default) demo.

プレビュー全画面表示

Under(character. bottom)

CSS Under(character. bottom) demo.

プレビュー全画面表示

under + offset

CSS Under + offset demo.

プレビュー全画面表示

実務での使いどころ

  • 読みやすい下線配置

    リンクや強調テキストの下線をディセンダーの下に配置し、文字と重ならない読みやすい下線を実現します。

注意点

  • left と right の値は主に縦書きテキストで意味を持ち、横書きでは under と同じ動作になります。

アクセシビリティ

  • 下線がテキストと重ならないことで、特に低視力のユーザーにとってテキストの可読性が向上します。

参考リンク