CSS3スタイル虎の巻

text-decoration-color

text-decoration-colorは、テキストの装飾線の色を指定するCSSです。

解説

テキストの装飾線の色をカラーネームやカラーコードで指定します。

構文

構文は以下になります。

text-decoration-color: 値;

値

text-decoration-colorには以下の値が指定できます。

値説明
カラーネームカラーネームで指定する
（例）青色を名称で指定する
　⇒ text-decoration-color:blue;
カラーコードカラーコードで指定する
（例）青色をコードで指定する
　⇒ text-decoration-color:#0000ff;
RGB値RGB値で指定する
（例）青色をRGB値で指定する
　⇒ text-decoration-color:rgb(0, 0, 255);
RGBA値RGBA値で指定する
（例）青色、透過率0.8を指定する
　⇒ text-decoration-color:rgba(0, 0, 255, 0.8);
　※透過率は0.0(透明)～1.0(不透明)で指定します。
transparent透明を指定する
（例）text-decoration-color:transparent;

サンプル

青色の装飾線をテキストの下に引く


.sample01 {
  text-decoration-line:underline;
  text-decoration-color:blue;
}


<div class="sample01">青色の下線です</div>
青色の下線です

赤色の装飾線をテキストの中央に引く


.sample02 {
  text-decoration-line:line-through;
  text-decoration-color:#ff0000;
}


<div class="sample02">赤色の中央線です</div>
赤色の中央線です

備考

  • デフォルトの色は黒色です。

関連項目