text-decoration-style

概要

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

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

構文

/* Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

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

値

solid double dotted dashed wavy

以下のキーワードのいずれかです:

キーワード	説明	備考
solid	一重の線を描画
double	二重線を描画
dotted	点線を描画
dashed	破線を描画
wavy	波状の線を描画
-moz-none	線を描画しない	使用しないでください : 代わりに text-decoration-line: none を使用してください

inherit

親要素で計算された値を再利用することを示すキーワードです。

形式文法

solid | double | dotted | dashed | wavy

例

.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;
}

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

<p class="example">This is how it looks.</p>

仕様書

ブラウザ実装状況