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

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

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

構文

/* キーワード値 */
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: unset;

solid
単独線を描画します。
double
二重線を描画します。
dotted
点線を描画します。
dashed
破線を描画します。
wavy
波線を描画します。
-moz-none
線を描画しません。代わりに text-decoration-line: none を使用してください。

形式文法

solid | double | dotted | dashed | wavy

.wavy { 
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
<p class="wavy">This text has a wavy red line beneath it.</p>

仕様策定状況

仕様書 策定状況 コメント
CSS Text Decoration Module Level 3
text-decoration-style の定義
勧告候補 初回定義。 text-decoration プロパティが複数の関連するプロパティを定義するための一括指定になりました。

初期値solid
適用対象全要素。 ::first-letter and ::first-line にも適用されます。
継承不可
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応57 ?

36

6 — 39 -moz-

なし44 あり -webkit-
wavy57 ?6 なし44 あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応5757 ?

36

6 — 39 -moz-

44 あり -webkit- 7.0
wavy5757 ?644 あり7.0

関連情報

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

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Sebastianz, mitsuba-clover, ethertank, sosleepy, yyss
最終更新者: mfuji09,