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 |
---|---|
適用対象 | すべての要素。 ::first-letter および::first-line にも適用されます。 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
例
波線の下線を設定
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
関連情報
- 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の
text-decoration
プロパティを使った方が便利かもしれません。