text-decoration

text-decorationCSS一括指定プロパティで、テキストの装飾的な線の表示を設定します。これは text-decoration-line, text-decoration-color, text-decoration-style およびさらに新しい text-decoration-thickness プロパティの一括指定です。

文字列装飾は、子孫の文字列要素に適用されます。つまり、要素に文字列装飾が指定されれば、子要素では装飾を外すことができません。例えば、 <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-thickness
装飾に使われる線の太さを設定します。

形式文法

<'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;
}

.thick {
  text-decoration: solid underline purple 4px;
}

.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="thick">This text has a really thick purple underline in supporting browsers.</p>
<p class="blink">This text might blink for you,
    depending on the browser you use.</p>

仕様書

仕様書 状態 備考
CSS Text Decoration Module Level 4 草案 text-decoration-thickness を追加。なお、これはまだ公式には一括指定の一部ではありません。これはまだ未定義です。
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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
text-decorationChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 あり
blink
非推奨
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 1 — 23IE 未対応 なしOpera 未対応 4 — 15Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 4 — 23Opera Android 未対応 10.1 — 14Safari iOS 未対応 なしSamsung Internet Android 完全対応 7.0
ShorthandChrome 完全対応 57Edge 未対応 なしFirefox 完全対応 36
完全対応 36
部分対応 6
IE 未対応 なしOpera 完全対応 44Safari 完全対応 8
接頭辞付き
完全対応 8
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 57Chrome Android 完全対応 57Firefox Android 完全対応 36
完全対応 36
部分対応 6
Opera Android 完全対応 43Safari iOS 完全対応 8
接頭辞付き
完全対応 8
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 あり
text-decoration-thickness included in shorthand
実験的非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 70IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報