HTML & CSS

リファレンス

CSS

テキスト デコレーション カラー

text-decoration-colorプロパティ

text-decoration-lineプロパティで引いた線の色を指定するプロパティです。

  • 初期値

    currentColor

  • 継承

    不可

  • 適用できる要素

    全要素

色の指定については、カラーネーム、カラーコード、rgba形式を使用することができます。
2016年8月現在、Chrome、Opera、InternetExploereには対応していません。
Safariに適用する場合はベンダープレフィックス「-webkit-」を付ける必要があります。


値の設定例

それぞれの値を指定した例です。

CSSコード例

<style type="text/css">
.text1 {
	text-decoration-line: underline;
	-webkit-text-decoration-line: underline;
	text-decoration-color: red;
	-webkit-text-decoration-color: red;
}

.text2 {
	text-decoration-line: underline;
	-webkit-text-decoration-line: underline;
	text-decoration-color: #f0d128;
	-webkit-text-decoration-color: #f0d128;
}
.text3 {
	text-decoration-line: underline;
	-webkit-text-decoration-line: underline;
	text-decoration-color: rgba( 65, 144, 242, 1.0);
	-webkit-text-decoration-color: rgba( 65, 144, 242, 1.0);
}
</style>
<p class="text1">プロパティのテスト</p>
<p class="text2">プロパティのテスト</p>
<p class="text3">プロパティのテスト</p>

表示例:

text-decoration-colorプロパティの適用例

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。