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

ブラウザーの互換性

BCD tables only load in the browser

関連情報