Cascading Style Sheets text-decoration property.
text-decorationとはテキストの装飾を指定するプロパティです。装飾の種類には下線、上線、取り消し線、点滅があり、傍線の付け方・色・スタイル・太さをまとめて指定する際に使用します。
このプロパティは以下の CSSプロパティの一括指定です。
ブロックレベル要素に指定した場合は、その中に含まれるすべてのインライン要素に適用されます。none以外の値は、半角スペースで区切って複数同時に指定することができます。その場合の指定順序は自由です。省略された値は、初期値に設定されます。
text-decorationプロパティは CSS1 や CSS2 から存在していますが、 CSS3 からはテキストの線・色・スタイルをまとめて指定できるショートハンド（短縮形）プロパティとして使用できます。
ただし、これらの値をまとめて指定すると、旧いブラウザでは無視されてしまうかもしれません。
text-decoration: underline dotted red;
/* 旧いブラウザでは無視される */
text-decoration: underline;
/* 併記しておくほうがベター */
CSS source
.c1 {
text-decoration: overline;
}
.c2 {
text-decoration: underline;
}
.c3 {
text-decoration: line-through;
}
.c4 {
text-decoration: overline underline;
}
.c5 {
text-decoration: blink;
}
HTML source
<p>テキスト：標準</p>
<p class="c1">テキスト：overline</p>
<p class="c2">テキスト：underline</p>
<p class="c3">テキスト：line-through</p>
<p class="c4">テキスト：overline underline</p>
<p class="c5">テキスト：blink</p>
テキスト：標準
テキスト：overline
テキスト：underline
テキスト：line-through
テキスト：overline underline
テキスト：blink
blink（点滅）使用上の注意点
2021年5月現在で最新の、Firefox、Opera、Chrome、Safari、Edge、いずれのブラウザでも未対応でした。文字を点滅させる表現は、多くのユーザーにとって視認性や判読性を悪くし不愉快なものです。このような点滅させる表現は CSSアニメーションで実現することを推奨されていますが、私個人としては極力使わないことを推奨します。
なお、線は colorプロパティで設定されている色になるため、基本的にはテキストと同じ色になります。部分的にテキストの色が変更されている場合でも、線の色は変わりません。もし、線の色も変えたい場合は、text-decorationプロパティを再定義しなければならないようです。
CSS source
.c4 {
text-decoration: overline underline;
}
HTML source
<p class="c4">テキスト：overline underline</p>
テキスト：overline underline
上記の例の「overline」という文字列に対して span要素と colorプロパティを使って赤い文字に設定してみます。
CSS source
.c4 {
text-decoration: overline underline;
}
.c4 span {
color: red;
}
HTML source
<p class="c4">テキスト：<span>overline</span> underline</p>
テキスト：overline underline
これだと、文字列だけが赤くなり、線の色は変わりません。
線の色まで変えたい場合は、上記の例の span要素のところで colorプロパティと一緒に text-decorationプロパティを再定義する必要があるようです。
CSS source
.c4 {
text-decoration: overline underline;
}
.c4 span {
text-decoration: overline underline;
color: red;
}
HTML source
<p class="c4">テキスト：<span>overline</span> underline</p>
テキスト：overline underline
text-decorationで色を指定した場合ほとんどのブラウザで、傍線の色も変わるようですが、一部のブラウザでは同様に文字色だけが変わり傍線の色は変わらないようです。2022年5月2日時点では、Safariが未対応のようです。
HTML source
<p class="c4">テキスト：<span>overline</span> underline</p>
CSS source
.c4 {
text-decoration: overline underline;
}
.c4 span {
text-decoration: overline underline red;
}
テキスト：overline underline