text-decoration

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

text-decorationCSS一括指定プロパティで、テキストの装飾的な線の表示を設定します。これは text-decoration-linetext-decoration-colortext-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" に第二の装飾が施されます。

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

css
text-decoration: underline;
text-decoration: overline red;
text-decoration: none;

/* グローバル値 */
text-decoration: inherit;
text-decoration: initial;
text-decoration: revert;
text-decoration: revert-layer;
text-decoration: unset;

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

text-decoration-line

使用する装飾の種類を設定します。 underlineline-through などです。

text-decoration-color

装飾の色を設定します。

text-decoration-style

装飾に使用する線のスタイルを設定します。 solid, wavy, dashed などです。

text-decoration-thickness

装飾に使われる線の太さを設定します。

公式定義

初期値一括指定の次の各プロパティとして
適用対象すべての要素。 ::first-letterおよび::first-line にも適用されます。
継承なし
計算値一括指定の次の各プロパティとして
アニメーションの種類一括指定の次の各プロパティとして

形式文法

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

<text-decoration-line> =
none |
[ underline || overline || line-through || blink ]

<text-decoration-style> =
solid |
double |
dotted |
dashed |
wavy

<text-decoration-color> =
<color>

text-decoration の値のデモ

css
.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;
}
html
<p class="under">このテキストには下付近に 1 本の線があります。</p>
<p class="over">このテキストの上に線があります。</p>
<p class="line">このテキストには取り消し線があります。</p>
<p>
  この<a class="plain" href="#">リンクには下線が引かれていません</a
  >が、リンクは一般的には既定で下線があります。ユーザーはハイパーリンクを示すアンダーラインを頼りにしていることが多いので、アンカーの文字装飾を削除する場合は注意が必要です。
</p>
<p class="underover">このテキストには上<em></em>下に線があります。</p>
<p class="thick">
  対応しているブラウザーでは、このテキストは実に太い紫色の下線があります。
</p>
<p class="blink">
  使用しているブラウザーによっては、このテキストは点滅しているかもしれません。
</p>

結果

仕様書

Specification
CSS Text Decoration Module Level 3
# text-decoration-property
Scalable Vector Graphics (SVG) 2
# TextDecorationProperties

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-decoration
text-decoration-color and text-decoration-style included in shorthand
text-decoration-thickness included in shorthand

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Requires a vendor prefix or different name for use.

関連情報