text-decoration-style

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-styleCSS のプロパティで、 text-decoration-line で指定された線の種類を設定します。線の種類はすべての線に適用され text-decoration-line で定義された線ごとに異なる種類を定義する方法はありません。

試してみましょう

文字列を貫く線で文字列が削除されたことを示すように、指定された装飾が特定の意味を持つ場合は、 <del><s> といった HTML タグでその意味を示すことが推奨されます。ブラウザーはスタイルを無効にする場合がありますが、そのようなときでも意味論上の意味が失われません。

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

構文

css
/* キーワード値 */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

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

solid

単独線を描画します。

double

二重線を描画します。

dotted

点線を描画します。

dashed

破線を描画します。

wavy

波線を描画します。

-moz-none

線を描画しません。代わりに text-decoration-line: none を使用してください。

公式定義

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

形式文法

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

波線の下線を設定

次の例は、赤い波線の下線を生成します。

CSS

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

HTML

html
<p class="wavy">このテキストには付近に赤い波線があります。</p>

結果

仕様書

Specification
CSS Text Decoration Module Level 3
# text-decoration-style-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-style
wavy

Legend

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

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報