2020.02.04 2022.12.26

text-decoration-lineプロパティの使い方・サンプルコード

Sara

text-decoration-line

text-decoration-lineプロパティは、上線・下線などテキストに引く線の種類を指定します。

線の種類・スタイル・色をまとめて指定する場合は text-decorationプロパティを使うことができます。

セレクタ {
  text-decoration-line: ここに値を指定;
}

値の間に半角スペースを入れて複数の値を指定することもできます。（例③参照）

HTML

<p>あいうえお<span class="spelling">かくきけこ</span>さしすせそ</p>

CSS

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

実行結果

あいうえおかくきけこさしすせそ

HTML

<p>ここに<span class="lineblue">青い二重線</span>を引きます。</p>

CSS

.lineblue {
  text-decoration-line: line-through;
  text-decoration-style: double;
  text-decoration-color: blue;
}

実行結果

ここに青い二重線を引きます。

HTML

<p><span class="line-three">上下中央</span>に線を引きます。</p>

CSS

.line-three {
 text-decoration-line:underline overline line-through;
}

実行結果

上下中央に線を引きます。