CSS - text-decoration-style

概要

属性名 text-decoration-style
値 solid | double | dotted | dashed | wavy
初期値 solid
適用可能要素すべての要素
継承なし
サポートhttps://caniuse.com/mdn-css_properties_text-decoration-style

説明

テキストの装飾線 (上線、下線、打消し線) の線種を指定します。text-decoration で他の属性とまとめて指定することもできます。

値説明
solid直線をひきます。
double二重線をひきます。
dotted点線をひきます。
dashedダッシュ線をひきます。
wavy波線をひきます。

使用例

CSS
.td {
  text-decoration-line: underline;
}
.solid {
  text-decoration-style: solid;
}
.double {
  text-decoration-style: double;
}
.dotted {
  text-decoration-style: dotted;
}
.dashed {
  text-decoration-style: dashed;
}
.wavy {
  text-decoration-style: wavy;
}
HTML
<span class="td solid">直線</span>
<span class="td double">二重線</span>
<span class="td dotted">点線</span>
<span class="td dashed">ダッシュ線</span>
<span class="td wavy">波線</span>
表示
直線 二重線 点線 ダッシュ線 波線

関連項目

text-decoration

リンク

Copyright (C) 2022 杜甫々
初版：2022年7月31日、最終更新：2022年7月31日
https://www.tohoho-web.com/css/prop/text-decoration-style.htm