text-decorationプロパティ

text-decorationプロパティに指定できる値

text-decorationプロパティには以下のプロパティを指定することができます。

各プロパティに指定できる値については、それぞれのプロパティのページを参照してください。

使用例1

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

CSS コード例

.text1 {
  text-decoration: underline;
}

HTML コード例

<p class="text1">プロパティのテスト</p>

ブラウザで表示してみると以下のようになります。

使用例2

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

CSS コード例

.text {
  text-decoration: underline red;
}

HTML コード例

<p class="text">プロパティのテスト</p>

ブラウザで表示してみると以下のようになります。

使用例3

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

CSS コード例

.text {
  text-decoration: underline wavy blue;
}

HTML コード例

<p class="text">プロパティのテスト</p>

ブラウザで表示してみると以下のようになります。