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

はじめに

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

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

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

【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 による一括の指定には含まれません。線の位置調整を行うには必ず追加で記述する必要があります。

線が途切れないようにしたい：text-decoration-skip-ink

【text-decoration: underline;】によるテキストの下線は、文字と重なった部分の線がデフォルトでは途切れる仕様になっています。

この仕様はローマ字表記の「y」や「g」などでは違和感がないかもしれませんが、日本語表記では一字分まるごと線が途切れたような見た目になってしまいます。

これを回避するためには「text-decoration-skip-ink」を活用しましょう。
text-decoration-skip-ink のプロパティでは以下の3つの値を設定することができます。

①none：線が文字に触れるときに線の中断を行わない。
②auto：初期値。線が文字に触れそうなときに中断を行う可能性がある。
③all：線が文字に触れるときに必ず中断を行う。

線と文字が重なる部分で線を途切れさせたくないというときには「none」を設定することで解決できます。

text-decoration-skip-ink の既定値は「auto」ですが、これは日本語・中国語・韓国語では挙動が安定しない場合があるため、線と文字が交わるときに必ず線を途切れさせたいというときには「all」を指定しましょう。

text-underline-offset と同じように、text-decoration-skip-ink は text-decoration による一括の指定には含まれませんので、必ず追加で記述する必要があります。

text-decoration関連プロパティの早見表

下線（アンダーライン）の見た目は、次のプロパティの組み合わせで調整します。太さ・位置・色・線の種類・途切れ方を、それぞれ個別に指定できます。

/* よく使う組み合わせの例 */
a {
  text-decoration: underline dotted #e60033; /* 種類・スタイル・色 */
  text-decoration-thickness: 2px;            /* 太さ */
  text-underline-offset: 0.3em;              /* 位置 */
}

太さは一括指定の text-decoration にも書けますが、ブラウザによっては反映されないことがあるため、text-decoration-thickness で個別に書くのが確実です。

下線を点線・波線・二重線にする方法

線の種類は text-decoration-style で変更できます。実線以外の下線は、注釈や強調など、通常のリンクと区別したい場面で便利です。

.dotted { text-decoration: underline dotted; } /* 点線 */
.dashed { text-decoration: underline dashed; } /* 破線 */
.wavy   { text-decoration: underline wavy;   } /* 波線 */
.double { text-decoration: underline double; } /* 二重線 */

点線や波線は線が細いと見えにくいため、text-decoration-thickness で太さを足すと読みやすくなります。

ホバーで下線を表示・アニメーションさせる方法

リンクにマウスを乗せたときだけ下線を表示したい場合は、下線の色を透明から文字色に切り替えると、なめらかに表示できます。

a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  transition: text-decoration-color 0.3s;
}

a:hover {
  text-decoration-color: currentColor;
}

下線を左から右へ伸ばすアニメーションにしたい場合は、text-decoration ではなく背景（background）で線を描く方法が使えます。

.underline-anim {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 2px; /* 最初は幅0 */
  transition: background-size 0.3s;
}

.underline-anim:hover {
  background-size: 100% 2px; /* ホバーで幅100%に */
}

border-bottomとtext-decorationの違い

下線は border-bottom でも引けますが、見た目や調整方法が異なります。文字に沿った下線なら text-decoration、要素の幅いっぱいに線を引きたいなら border-bottom が向いています。

よくある質問

Q. text-decoration-thickness を指定しても太さが変わりません。
→ 一括指定の text-decoration を後から書いて、太さが初期値に戻っていないか確認してください。また、フォントサイズに対して細かすぎる値（1px未満など）は、表示上ほとんど変化しないことがあります。

Q. 下線の色だけを変えることはできますか？
→ できます。text-decoration-color を指定すると、文字色はそのままで下線の色だけを変更できます。

Q. リンクの下線を消すにはどうすればよいですか？
→ text-decoration: none; を指定します。ただし、下線を消すと本文中のリンクが分かりにくくなるため、色や太字などで区別できるようにしておきましょう。

あわせて読みたいCSSの記事

• 【CSS】背景と文字の色を反転させたい！（mix-blend-mode）
• font-feature-settings実践テク7選
• 【CSS】placeholderの文字色やフォントサイズを変更したい！
• 【CSS基礎】改行・空白文字を制御するwhite-spaceプロパティとは？

おわりに

text-decorationプロパティとそれにまつわる設定を調整するだけでも意外と様々な文字装飾の表現が可能ですので、ぜひ使いこなしてみてください。

勉強中の方、HTML・CSS駆け出しの方の参考にしていただけたら幸いです。