text-underline-offset プロパティ

最終更新：2026-09-13

text-underline-offset text-underline-offset プロパティ

text-underline-offset プロパティは、テキストの下線とベースラインの距離を設定し、下線の位置をより柔軟で洗練されたものにします。既定では下線はテキストの下端にぴったりと寄りますが、オフセットを設定すると下線と文字の間に隙間ができ、g や y のような下伸び部分との重なりを避けられます。

カテゴリ
初期値	auto
継承	はい
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

text-underline-offset: auto | <length> | <percentage>;

⚙️ 値

値	タイプ	説明
`auto`	キーワード	既定のオフセット
`<length> \| <percentage>`	タイプ	長さまたはパーセンテージで表す下線のオフセット距離

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
text-underline-offset	✓ v66	✓ v79	✓ v62	✓ v12.1	✓ v53
すべての主要ブラウザーでサポート

ヒント： text-underline-offset は下線の位置だけに影響し、上線や打ち消し線には影響しません。

注意： このプロパティには比較的新しいブラウザ（Chrome 66+、Firefox 62+、Safari 12.1+）が必要で、古いブラウザは無視します。

❓ よくある質問

Qtext-underline-offset と text-decoration-thickness の違いは？

Atext-underline-offset は下線と文字の距離を制御し、text-decoration-thickness は下線の太さを制御します。両者は補完し合い、組み合わせてより細かい下線スタイルにできます。

Qパーセンテージ値は何に対する相対値ですか？

A要素の font-size に対する相対値で、100% は現在の字号に等しくなります。例えば字号 16px で text-underline-offset: 30% なら約 4.8px 下移動します。値 0 で下線を文字の下端にぴったり寄せられます。

QCSS で下線と文字の間に隙間を作るには？

Atext-decoration: underline に加えて text-underline-offset: 3px（または 0.2em）を指定すると、下線が全体として下移動します。text-decoration-thickness と組み合わせれば太さも調整でき、より美しいリンク下線になります。