【CSS】text-decorationプロパティについて

どうも、くまだです。

CSSのtext-decorationプロパティについて。

text-decorationプロパティ

text-decorationプロパティはテキストに下線を表示させるプロパティです。案外いろいろ指定できます。

おそらくよく使うのが、以下の記述だと思います。

.text {
  text-decoration: underline;
}

下線の色を変える場合は以下の記述になります。

<p class="title">下線の色変える</p>

<p class="text color">テキストてきすと</p>
<hr />

.text {
    text-decoration: underline;
}

.color{
    text-decoration-color: red;

}

下線の種類を変える場合は以下のように記述します。

<p class="title">波線や二重線</p>

<p class="text nami">テキストてきすと</p>
<p class="text double">テキストてきすと</p>
<hr />

.text {
    text-decoration: underline;
}

.nami {
    text-decoration-style: wavy;
}
.double {
    text-decoration-style: double;
}

他にも普通の下線（solid）、点線（dotted）、破線（dashed）などがあります。

下線の太さを変える場合は以下のように記述します。

<p class="title">線の太さ変える</p>
<p class="text thickness">テキストてきすと</p>

<hr />

.text {
    text-decoration: underline;
}


.thickness {
    text-decoration-thickness: 5px;
}

文字と下線の間の距離を変える場合は以下のように記述します。

<p class="title">線と文字の間の距離</p>
<p class="text offset">テキストてきすと</p>

.text {
    text-decoration: underline;
}


.offset {
    text-underline-offset: 10px;
}

下線の種類や線の色はtext-decorationプロパティで一括で指定できます。

ここまで読んでくださりありがとうございました。