text-decoration

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

text-decoration 属性は、テキストに下線、上線、取り消し線を適用するかどうかを定義します。これは、text-decoration-line および text-decoration-style プロパティの一括指定です。

テキスト装飾の塗りつぶしと線は、そのテキスト装飾が宣言されている箇所におけるテキストの塗りつぶしと線によって指定されます。

テキスト装飾（つまり、塗りつぶしと輪郭線）の描画順序は、テキスト装飾が宣言されている箇所における paint-order 属性の値によって決定されます。

メモ: プレゼンテーション属性であるため、 text-decoration には対応する CSS プロパティ text-decoration もあります。両方が指定された場合、 CSS プロパティが優先されます。

この属性は、以下の SVG 要素で使用できます。

例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 250 50" xmlns="http://www.w3.org/2000/svg">
  <text y="20" text-decoration="underline">下線を引いたテキスト</text>
  <text x="0" y="40" text-decoration="line-through">取り消し線を引いたテキスト</text>
</svg>

使用上のメモ

値	`<'text-decoration-line'>` \|\| `<'text-decoration-style'>` \|\| `<'text-decoration-color'>`
デフォルト値	それぞれのプロパティを参照
アニメーション	可