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.

CSS の text-decoration-style プロパティは、 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: 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

.example {
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: wavy;
  -moz-text-decoration-color: red;
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-style: wavy;
  -webkit-text-decoration-color: red;
}

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

ブラウザーの互換性

BCD tables only load in the browser