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

text-decoration-skip-ink

text-decoration-skip-ink は CSS のプロパティで、上線や下線が文字のアセンダーやディセンダーを通過するときにどのように引くのかを指定します。

テキスト装飾可読性

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-decoration-skip-ink
64
79
70
15.4
64
15.4
auto
64
79
70
15.4
64
15.4
none
64
79
70
15.4
64
15.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
a {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

ライブデモ

Auto(default)

CSS Auto(default) demo.

プレビュー全画面表示

None

CSS None demo.

プレビュー全画面表示

All(allcharactershapetimes)

CSS All(allcharactershapetimes) demo.

プレビュー全画面表示

実務での使いどころ

  • 読みやすい下線リンク

    リンクの下線がグリフのディセンダーと重ならないようにし、テキストの可読性を向上させます。

注意点

  • CJK文字ではデフォルトの auto でスキップが行われない場合があり、all を明示的に指定する必要があるかもしれません。

アクセシビリティ

  • 下線のインクスキップはテキストの読みやすさを向上させ、特にディスレクシアのあるユーザーに有益です。

参考リンク