text-decorationプロパティ

値

指定できる値の種類については各プロパティを参照してください。
2016年8月現在、text-decoration-lineプロパティの値を1つだけ指定する場合は全ブラウザでサポートしています。
複数の値を指定、またはスタイルと色の指定はChrome、Opera、InternetExploereでは対応していません。
また、Safariに適用する場合はベンダープレフィックス「-webkit-」を付ける必要があります。

パターン1

text-decoration-lineプロパティのみを指定する例です。

CSSコード例

<style type="text/css">
.text {
	text-decoration: underline;
}
</style>
<p class="text">プロパティのテスト</p>

表示例：

パターン2

text-decoration-lineプロパティ、text-decoration-colorプロパティを指定した例です。

CSSコード例

<style type="text/css">
.text {
	text-decoration: underline red;
	-webkit-text-decoration: underline red;
}
</style>
<p class="text">プロパティのテスト</p>

表示例：

パターン3

text-decoration-lineプロパティ、text-decoration-colorプロパティ、text-decoration-styleプロパティをそれぞれ指定した例です。

CSSコード例

<style type="text/css">
.text {
	text-decoration: underline wavy blue;
	-webkit-text-decoration: underline wavy blue;
}
</style>
<p class="text">プロパティのテスト</p>

表示例：

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

コメントありがとうございます！
運営の参考にさせていただきます。