CSSでテキストの下線（アンダーライン）を表示する・消す方法/text-decorationプロパティの使い方とサンプル

リンクなどに表示される下線は、設定次第で出したり消したりすることができます。また、点線などにすることも可能です。

text-decorationの使い方

CSSで上記プロパティに値を入力します。borderがborder-top、right、bottom、left、のそれぞれstyle、color、widthをひとまとめにした命令であるように、text-decorationもtext-decoration-style、color、lineの集合体です。lineを指定するだけであれば、値として下線（underline）上線（overline）取り消し線（line-through）線なし（none）のいずれかを指定するだけでOKですが、他のふたつを指定する場合はlineも同時に指定するか、text-decoration-colorもしくはstyleで値を指定する必要があります。
styleには線が表示/非表示を繰り返す点線（blink）というのもありましたが、これは非推奨の記述になったので、同様のことをしたければ他のCSSで対応する必要があります。

こういうのは実物見たほうが話が早い気がします。

サンプル

下線

.under-line{
text-decoration:underline;
}

上線

.over-line{
text-decoration:overline;
}

取り消し線

.line-through{
text-decoration:line-through;
}

点線（非推奨）

.line-blink{
text-decoration:blink;
}

線なし

.line-none{
text-decoration:none;
}

赤線

.line-red{
text-decoration:underline red;
}

点線

.line-dotted{
text-decoration:underline dotted green;
}

波線

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

二重線

.line-wavy{
text-decoration:line-through double #9932cc;
}

波線はよくあと12時間だけ公開しているここだけの話とかについてますね。マウスを乗せた時だけリンクの下線を消したい・付けたい場合などは、hover時にtext-decorationを変更することで実装可能です。

CSSの便利な使い方・プロパティ逆引きリファレンス

HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

sunagitsune.com

2019.01.27