2020.02.04 2022.12.26

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

Sara

text-decoration-color

text-decoration-colorプロパティは、text-decoration-line プロパティで指定した線の色を指定します。

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

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

値
色の指定	キーワード, HEX形式, RGB形式などで色を指定します。

セレクタ {
  text-decoration-color: red;
}

セレクタ {
  text-decoration-color: #ff0000;
}

セレクタ {
  text-decoration-color: rgb(255, 0, 0);
}

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

実行結果

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