【CSS】text-decoration: underline;の＜太さ・位置調整・色・途切れる＞のまとめ

2024年3月22日

はじめに

福岡のホームページ制作・SEO対策の株式会社スゴヨクです。

CSSで文字に下線の装飾をしたい！というときによく設定する項目についてまとめました。

疑似要素を使用するとより自由度の高い装飾を実装することができますが、【text-decoration: underline;】にまつわる設定だけでも十分なことがたくさんあると思うのでぜひ活用してみてください。

→「【CSS】背景と文字の色を反転させたい！（mix-blend-mode）」はこちらから

【text-decoration: underline;】の線の色・太さ

text-decorationプロパティでできること

そもそもtext-decorationプロパティとはテキストの装飾的な線の表示を設定するものです。より正確な説明をすると、
①text-decoration-color
②text-decoration-thickness
③text-decoration-line
④text-decoration-style
……の4つのプロパティを一括で指定することができるというプロパティです。

4つのプロパティ

それぞれ以下のような値の指定を行うことができます。

①text-decoration-color：線の色
②text-decoration-thickness：線の太さ
③text-decoration-line：線の種類
　→ none（なし）・overline（上線）・underline（下線）・line-through（打消し線）
④text-decoration-style：線のスタイル
　→ solid（直線）・double（二重線）・dotted（点線）・dashed（破線）・wavy（波線）

*****

③text-decoration-lineの初期値は「none」です。
【text-decoration: underline;】というのは、【text-decoration-line: underline;】という指定と同じで「該当のテキストに下線の装飾を行う＋その他の3つのプロパティは初期値のまま」ということを表しています。

この下線の色や太さを設定するには①text-decoration-colorと②text-decoration-thicknessを追加で指定するか、【text-decoration: underline red 5px;】のように一括で指定することもできます。

色と太さを変化させるだけでもマーカーのような装飾の表現が可能です。

【text-decoration: underline;】の線の位置を調整したい・途切れないようにしたい

線の位置を調整したい：text-underline-offset

文字と線の位置を近づけたい・離したい・程よく調整したいという場面は多々あると思います。
そんな時には「text-underline-offset」のプロパティを使用することで線の位置を動かすことができます。

「offset」は「基準からどれだけ離れているか」という意味をもちます。
text-underline-offsetの初期値は「auto」に設定されていて、自分で調整する際にはpxや%で数値を指定して制御を行うことができます。
数値が大きいほど初期の位置から文字の外側へと離れていきます。マイナスの値を指定すると、初期値よりもテキストのほうへ近づく方向に動かすことができます。

なお、text-underline-offset は先ほどの text-decoration による一括の指定には含まれません。線の位置調整を行うには必ず追加で記述する必要があります。