CSStext-decoration プロパティは、テキストの装飾的な線の表示を設定します。これは text-decoration-line, text-decoration-color, text-decoration-style の一括指定です。

文字列装飾は、子孫の文字列要素に適用されます。つまり、要素に文字列装飾が指定されれば、子要素では装飾を外すことができません。例えば、 <p>This text has <em>some emphasized words</em> in it.</p> という文と、 p { text-decoration: underline; } のスタイル規則では、段落全体に下線が引かれます。 em { text-decoration: none; } のスタイル規則を適用しても変化せず、段落全体に下線が引かれたままになります。しかし、 em { text-decoration: overline; } の規則で "some emphasized words" に第二の装飾が施されます。

構文

text-decoration プロパティは、個別指定の text-decoration プロパティを表す1つまたは複数の値を空白で区切って指定します。

text-decoration-line
使用する装飾の種類を設定します。 underlineline-through などです。
text-decoration-color
装飾の色を設定します。
text-decoration-style
装飾に使用する線のスタイルを設定します。 solid, wavy, dashed などです。

形式文法

<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.plain {
  text-decoration: none;
}

.underover {
  text-decoration: dashed underline overline;
}

.blink {
  text-decoration: blink;
}
<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>This <a class="plain" href="#">link will not be underlined</a>,
    as links generally are by default. Be careful when removing
    the text decoration on anchors since users often depend on
    the underline to denote hyperlinks.</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>
<p class="blink">This text might blink for you,
    depending on the browser you use.</p>

仕様書

仕様書 状態 備考
CSS Text Decoration Module Level 3
text-decoration の定義
勧告候補 一括指定プロパティへ変更。 text-decoration-style の値への対応を追加。
CSS Level 2 (Revision 1)
text-decoration の定義
勧告 実質的な変更なし。
CSS Level 1
text-decoration の定義
勧告 初回定義

初期値一括指定の各プロパティとして
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承なし
メディア視覚
計算値一括指定の各プロパティとして
アニメーションの種類一括指定の各プロパティとして
正規順序形式文法における値の出現順

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
blink
非推奨
Chrome 完全対応 57
補足
完全対応 57
補足
補足 The blink value does not have any effect.
Edge 完全対応 12
補足
完全対応 12
補足
補足 The blink value does not have any effect.
Firefox 完全対応 23
補足
完全対応 23
補足
補足 The blink value does not have any effect.
完全対応 1
IE 完全対応 あり
補足
完全対応 あり
補足
補足 The blink value does not have any effect.
Opera 完全対応 15
補足
完全対応 15
補足
補足 The blink value does not have any effect.
完全対応 4
Safari 完全対応 あり
補足
完全対応 あり
補足
補足 The blink value does not have any effect.
WebView Android 完全対応 57
補足
完全対応 57
補足
補足 The blink value does not have any effect.
Chrome Android 完全対応 57
補足
完全対応 57
補足
補足 The blink value does not have any effect.
Edge Mobile 完全対応 あり
補足
完全対応 あり
補足
補足 The blink value does not have any effect.
Firefox Android 完全対応 23
補足
完全対応 23
補足
補足 The blink value does not have any effect.
完全対応 4
Opera Android 完全対応 4
補足
完全対応 4
補足
補足 The blink value does not have any effect.
Safari iOS 完全対応 あり
補足
完全対応 あり
補足
補足 The blink value does not have any effect.
Samsung Internet Android 完全対応 7.0
ShorthandChrome ? Edge 未対応 なしFirefox 完全対応 36
完全対応 36
部分対応 6
IE 未対応 なしOpera 未対応 なしSafari 完全対応 あり
補足
完全対応 あり
補足
補足 Safari doesn't support text-decoration-style.
WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 完全対応 36
完全対応 36
部分対応 6
Opera Android ? Safari iOS 完全対応 8
補足
完全対応 8
補足
補足 Safari doesn't support text-decoration-style.
Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, mitsuba-clover, Sebastianz, dskmori
最終更新者: mfuji09,