リンクの下線が文字に近すぎる？text-underline-offsetと太さを作例で調整しよう

リンクに下線を付けたら、文字に近すぎて読みにくい。線を太くすることと、文字から離すことを分けて調整してみよう。

この記事では、CSSの下線の距離と太さをページ内の作例で比べる。サーバーやデザインツールは不要。ブラウザで操作でき、元に戻すボタンもあるよ。

距離と太さは別の指定

text-underline-offsetは、文字に付く下線の位置をずらすプロパティ。text-decoration-thicknessは線の太さを指定する。どちらも、文字そのもののサイズを変える指定ではないよ。

.sample-link {
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

emは、その要素の文字サイズを基準にする単位。この例では文字が20pxなら、太さは1.6px、オフセットの指定値は4pxになる。実際の描画はフォントやブラウザ、画面の倍率にも左右される。

作例で一つずつ変える

1. ページ下部の作例で、最初のリンクの下線を見る。
2. 距離を0から0.3emへ変え、線が文字から離れることを確かめる。
3. 距離を保ったまま太さを変え、線だけが太くなるかを見る。
4. 文字サイズを変え、emで指定した値も文字に合わせて変わることを確認する。
5. リセットで、距離0.12em・太さ0.08em・文字24pxへ戻す。

作例のリンク先は同じ作例の中。外部サイトへ移動せず、設定値も画面に表示する。線の見え方と、指定した数値の両方を比べてね。

border-bottomとの違い

下側の枠線でも線は描けるけれど、文字の装飾と要素の枠は別の仕組み。複数行へ折り返すリンクでは、各行の文字に付く線として調整したいのか、箱の縁を描きたいのかを先に決めよう。

また、text-underline-offsetを指定しても、下線自体がなければ変化は見えない。text-decoration-lineがunderlineになっているかも確認する。上線や取り消し線の距離を動かす指定ではないよ。

装飾を整えたあとも、リンクだと分かるか

見た目をすっきりさせるために、下線とフォーカス表示を一緒に消す必要はない。サイト全体のリンクの見え方をそろえ、色だけで判断を求めないことも考えよう。

行の高さはline-heightの作例、案内する言葉はリンク文言の作り方へ。

参照した公式資料

• MDN：text-underline-offset
• MDN：text-decoration-thickness

確認日：2026年10月25日。