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

text-underline-position

text-underline-position は下線をテキストのベースラインの下（under）や、左右（left/right）に配置できます。under を使用するとディセンダーの下に下線が配置され、文字と重なりません。数学記号やCJKテキストの下線表示を改善するために活用されます。

下線位置テキスト装飾

概要

text-underline-position は下線をテキストのベースラインの下（under）や、左右（left/right）に配置できます。under を使用するとディセンダーの下に下線が配置され、文字と重なりません。数学記号やCJKテキストの下線表示を改善するために活用されます。

対応ブラウザ

デスクトップ

Chrome 33+
Edge 12+
Safari 12.1+
Firefox 74+

モバイル

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

基本構文

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

実務での使いどころ

  • 読みやすい下線配置

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

注意点

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

アクセシビリティ

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

参考リンク