text-decoration-line

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-decoration-lineCSS のプロパティで、下線や上線など、要素内の文字列に使われる装飾の種類を設定します。

試してみましょう

複数の line-decoration に関するプロパティを一度に設定するときは、代わりに一括指定の text-decoration プロパティを使用したほうが便利かもしれません。

構文

css
/* 単一のキーワード */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;

/* 複数のキーワード */
text-decoration-line: underline overline; /* 2 本の装飾線 */
text-decoration-line: overline underline line-through; /* 複数の装飾線 */

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

text-decoration-line プロパティは none または以下のリストにある 1 つ以上の空白で区切られた値を指定します。

none

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

underline

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

overline

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

line-through

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

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

公式定義

初期値none
適用対象すべての要素。 ::first-letterおよび::first-line にも適用されます。
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

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

基本的な例

html
<p class="wavy">こちらのテキストには赤い波線の下線が付いています。</p>
<p class="both">このテキストには上線と下線がついています。</p>
css
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

.both {
  text-decoration-line: underline overline;
}

仕様書

Specification
CSS Text Decoration Module Level 3
# text-decoration-line-property

ブラウザーの互換性

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-line
blink
Deprecated
grammar-error
Experimental
line-through
none
overline
spelling-error
Experimental
underline

Legend

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

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報