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.

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

構成要素のプロパティ

このプロパティは以下の 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

使用する装飾の種類を設定します。 underline や line-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

ブラウザーの互換性

BCD tables only load in the browser

関連情報