CSS text-underline-offset 属性

定義と使用方法

text-underline-offset 属性は、下線テキスト装飾のオフセット距離を指定します。

例

下線テキスト装飾のオフセット距離を設定します：

div.a {
  text-decoration: underline;
}
div.b {
  text-decoration: underline;
  text-underline-offset: 10px;
}
div.c {
  text-decoration: underline wavy blue;
}
div.d {
  text-decoration: underline wavy blue;
  text-underline-offset: 10px;
}

実際に試してみてください

CSS 文法

text-underline-offset: auto|length|percentage|initial|inherit;

属性値

値 説明
auto デフォルト値。ブラウザがアンダーラインに適切なオフセットを設定します。
length オフセットを長さで指定します。
percentage オフセットをパーセンテージで指定します。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性を親要素から継承します。参照してください inherit。

技術的詳細

デフォルト値： auto
継承性： yes
アニメーション作成： サポートされていません。参照してください：アニメーション関連属性。
バージョン： CSS4
JavaScript 文法： object.style.textUnderlineOffset="1em"

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
87.0 87.0 70.0 12.1 73.0

関連ページ

チュートリアル：CSS テキストデコレーション

参照：HTML DOM textDecoration 属性