text-decoration-line

概要

text-decoration-line CSS プロパティは、要素に対してどのような種類の線による装飾を追加するかを設定します。

下線 (underline) 装飾はテキストの下に、上線 (overline) 装飾はテキストの上に、取り消し線 (line-through) はテキストの中央に配置されます。

構文

/* Keyword values */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: underline overline;                /* 2 つの装飾線 */
text-decoration-line: overline underline line-through;   /* 複数の装飾線 */

/* Global values */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: unset;

値

none、またはホワイトスペースで区切られた 1 つ以上の値を指定できます:

none

テキストの装飾を行いません。

underline

テキストの各行に下線を引きます。

overline

テキストの各行の上部に線を引きます。

line-through

テキストの各行の中央を貫く線を引きます。

blink

テキストは点滅します（表示と非表示を交互に繰り返します）。準拠ユーザーエージェントはテキストを点滅させないかもしれません。この値は非推奨であり、CSS アニメーションが好まれます。

-moz-anchor-decoration

テキストはアンカーとして装飾されます。Web コンテンツでの使用には適していません。

形式文法

none | [ underline || overline || line-through || blink ]

例

HTML

<p>Here's some text with wavy red underline!</p>

CSS

p { 
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

仕様

ブラウザ互換性

[1] この値は有効とされていますが、仕様でブラウザがこの値を無視することを許可しており、点滅はしません。

[3] WebKit bug 90959