CSSで下線の位置・太さ・色を調整｜マーカー風コピペ集

CSSの下線は、text-decoration: underline に text-decoration-thickness（太さ）、text-underline-offset（位置）、text-decoration-color（色）を足すと、文字との距離まで細かく調整できます。 以前は border-bottom や背景グラデーションで代用していた調整の多くが、今は下線のプロパティだけで書けます。

この記事では、下線にかかわる全プロパティの値一覧に加えて、border-bottom・linear-gradient・::after を含めた4手法の比較表と、マーカー風・ホバーで伸びる線などのコピペ集を用意しました。コードはすべて Chromium 141（Playwright 1.56）で描画し、線の位置や太さ、折り返したときの本数をスクリーンショットのピクセルから計測しています。

CSSの下線の早見表

text-decorationの基本とプロパティ一覧

text-decoration は4つのプロパティをまとめて書く一括指定です。位置にかかわる3つは一括指定に含まれず、別に書きます。

一括指定の計算値を確認

一括指定がどう分解されるかを getComputedStyle で確認しました（line、style、color、thickness の順）。

text-decoration:underline                → underline | solid | rgb(0, 0, 0) | auto
text-decoration:underline dotted         → underline | dotted | rgb(0, 0, 0) | auto
text-decoration:underline red            → underline | solid | rgb(255, 0, 0) | auto
text-decoration:underline wavy red 2px   → underline | wavy | rgb(255, 0, 0) | 2px
text-decoration:red underline 0.1em      → underline | solid | rgb(255, 0, 0) | 1.6px
text-decoration:underline 2px            → underline | solid | rgb(0, 0, 0) | 2px
text-decoration:none                     → none | solid | rgb(0, 0, 0) | auto
offset は一括指定でリセットされるか: 5px
thickness を先に書いて一括指定: auto

ここから大事な点が2つわかります。

• 値の順番は自由。 red underline 0.1em でも正しく解釈されました。
• 一括指定は、書かなかった項目を初期値に戻す。 text-decoration-thickness: 5px のあとに text-decoration: underline を書くと、太さは auto に戻りました。一方、一括指定に含まれない text-underline-offset は 5px のまま残ります。

太さまで一括指定に書く形は、MDN の対応表では Safari が 26.2 からです。幅広い Safari で確実に効かせたいときは、太さだけ text-decoration-thickness で別に書くと安心です。

/* どのブラウザでも同じ結果になる書き方 */
.link {
  text-decoration: underline #e11d48;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

線の種類（text-decoration-line）

文字を透明にして線だけを描き、ベースライン（英字の下端がそろう線）からの位置を計測しました（font-size: 40px、Noto Sans CJK JP）。

underline            線の本数=1  位置(ベースライン基準)= 2px
overline             線の本数=1  位置(ベースライン基準)= -49px
line-through         線の本数=1  位置(ベースライン基準)= -17px
underline overline   線の本数=2  位置(ベースライン基準)= -49px, 2px

線の形（text-decoration-style）

太さ 3px で5種類を描き、線の本数と高さ、横方向に何区間に分かれるかを数えました。

solid    線の本数=1  全体の高さ=3px  横方向の区間数=1
double   線の本数=2  全体の高さ=7px  横方向の区間数=1
dotted   線の本数=1  全体の高さ=3px  横方向の区間数=34
dashed   線の本数=1  全体の高さ=3px  横方向の区間数=23
wavy     線の本数=1  全体の高さ=9px  横方向の区間数=13

wavy と double は高さが増えるので、行間（line-height）が詰まっていると次の行に近づきます。波線や2本線を使う段落は line-height: 1.8 前後にしておくと読みやすくなります。

下線の太さを変える（text-decoration-thickness）

font-size: 40px で計測した結果です（位置は線の上端）。

指定なし（auto）                          線の上端=ベースライン+2px  太さ=4px
text-decoration-thickness:1px           線の上端=ベースライン+1px  太さ=1px
text-decoration-thickness:4px           線の上端=ベースライン+2px  太さ=4px
text-decoration-thickness:0.1em         線の上端=ベースライン+2px  太さ=4px
text-decoration-thickness:10%           線の上端=ベースライン+2px  太さ=4px
text-decoration-thickness:from-font     線の上端=ベースライン+1px  太さ=2px

• auto は 40px の文字で 4px、つまり文字サイズの1割ほどでした。大きな見出しでは下線もかなり太くなります。
• 0.1em と 10% は同じ結果。 文字サイズが変わっても比率を保ちたいなら em か %、どの文字サイズでも一定にしたいなら px を選びます。
• from-font はフォント次第。 このフォントでは 2px でした。フォントに情報がない場合は auto と同じ扱いになります。

% 指定は MDN の対応表で Safari 17.4 からなので、迷ったら em が広く使えます。

下線の位置を調整する（text-underline-offset / text-underline-position）

位置を決めるプロパティは2つあり、役割がちがいます。

太さ 4px の線で位置を計測しました。

thickness:4px + text-underline-offset:0        線の上端=ベースライン+0px  太さ=4px
thickness:4px + text-underline-offset:4px      線の上端=ベースライン+4px  太さ=4px
thickness:4px + text-underline-offset:0.25em   線の上端=ベースライン+10px  太さ=4px
thickness:4px + text-underline-offset:-0.2em   線の上端=ベースライン-8px  太さ=4px
thickness:4px + text-underline-position:under  線の上端=ベースライン+5px  太さ=4px
thickness:4px + position:under + offset:4px    線の上端=ベースライン+9px  太さ=4px
thickness:4px + position:from-font             線の上端=ベースライン+5px  太さ=4px

• text-underline-offset の長さは、ベースラインから線の上端までの距離にそのまま反映される。 4px なら +4px、0.25em（40px の文字で 10px）なら +10px でした。
• 負の値で文字に重なる。 -0.2em で線がベースラインより 8px 上に来ます。あとで紹介する「下線だけで作るマーカー」はこの性質を使います。
• under は「g」や「y」の下にはみ出す部分を避けた位置まで下がり、offset と足し合わせられます（+5px に 4px を足して +9px）。

日本語の文章では text-underline-offset: 0.2em から 0.3em くらいにすると、文字と線の間にほどよいすき間ができます。em で書いておけば、見出しでも本文でも同じ比率になります。

text-underline-offset は下線専用で、overline や line-through の位置は変わりません。% 指定は Safari 18.2 からです。

文字と重なる部分の扱い（text-decoration-skip-ink）

欧文の「g」「j」「p」「q」「y」のように下へはみ出す文字では、ブラウザが下線を自動で切って読みやすくします。この挙動を決めるのが text-decoration-skip-ink です。

gjpqy    skip-ink:auto    区間数=4 computed=auto
gjpqy    skip-ink:none    区間数=1 computed=none
gjpqy    skip-ink:all     区間数=4 computed=auto
下線を引く  skip-ink:auto    区間数=1 computed=auto
下線を引く  skip-ink:none    区間数=1 computed=none
下線を引く  skip-ink:all     区間数=1 computed=auto

all は MDN の対応表で Chrome 148、Firefox 75、Safari 15.4 からです。手元の Chromium 141 では無効な値として扱われたため、all を指定した場合の描画は確認できていません。

太い線や、文字に重ねるマーカー風の線では none を指定すると、途中で途切れず帯のようにつながります。

4つの手法を比べる：text-decoration・border-bottom・linear-gradient・::after

下線を引く方法は text-decoration 以外にも3つあります。幅 200px の段落の途中に長い文を置き、3行に折り返したときに線が何本引かれるかを計測しました。

## 4手法：200px幅で3行に折り返したときの線（赤い帯の本数と各幅）
text-decoration                              行ボックス数=3  線の本数=3  各線の幅(px)= 178,200,40
border-bottom（inline）                        行ボックス数=3  線の本数=3  各線の幅(px)= 178,200,40
border-bottom（inline-block）                  行ボックス数=1  線の本数=1  各線の幅(px)= 200
linear-gradient（inline）                      行ボックス数=3  線の本数=3  各線の幅(px)= 178,200,40
linear-gradient + box-decoration-break:clone 行ボックス数=3  線の本数=3  各線の幅(px)= 178,200,40
::after（position:absolute）                   行ボックス数=3  線の本数=1  各線の幅(px)= 20
::after（inline-block の親）                     行ボックス数=1  線の本数=1  各線の幅(px)= 200

インライン要素のままなら、text-decoration・border-bottom・背景グラデーションはどれも3行すべてに線が引かれました。 ::after を position: absolute で置く方法は、折り返すと線が1本だけ（幅 20px）になり、文全体には引かれません。display: inline-block にすると1つの箱になるので、線は箱の下に1本だけです。

選び方の目安

コピペ集：そのまま使える下線とマーカー

ここからは用途別のコードです。HTMLは次の形を想定しています。

<p>本文の中で <a class="link" href="#">リンクの文字</a> や
<span class="marker">強調したい文</span> に使います。</p>

1. 読みやすいリンクの下線

.link {
  color: #1d4ed8;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.25em;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
}
.link:hover {
  text-decoration-color: currentColor;
}

線を文字色の半分の濃さにしておき、ホバーで濃くする形です。color-mix() は Chrome 111、Firefox 113、Safari 16.2 から使えます。

2. マーカー風（背景グラデーション）

.marker {
  background: linear-gradient(transparent 60%, #fde047 60%);
}

「上から60%は透明、そこから下は黄色」という背景です。font-size: 20px・line-height: 2 の段落で2行に折り返し、色の帯を計測しました。

linear-gradient(transparent 60%, 色 60%)  行ごとの帯 [上端,高さ]= [[62,12],[102,12]]  行ボックス[top,bottom]= [[45,74],[85,114]]

2行とも、文字の箱（高さ 29px）の下側 12px に帯が入りました。 60% の数字を小さくすると太く、大きくすると細くなります。

3. マーカー風（下線だけで作る）

.marker-line {
  text-decoration: underline;
  text-decoration-color: rgb(253 224 71 / 0.7);
  text-decoration-thickness: 0.5em;
  text-underline-offset: -0.2em;
  text-decoration-skip-ink: none;
}

太い下線を負のオフセットで文字に重ねる方法です。同じ条件で計測すると次のとおりでした。

text-decoration 太線＋負のoffset  行ごとの帯 [上端,高さ]= [[64,10],[104,10]]  行ボックス[top,bottom]= [[45,74],[85,114]]

太さ 0.5em（10px）の帯が各行に入りました。 位置と太さを文字サイズ基準で直接指定できるので、line-height を変えても帯の位置が動きません。背景を使わないため、背景色を別の用途に使っている要素にも向いています。

4. ホバーで左から線が伸びる（折り返し対応）

.grow {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 2px;
  transition: background-size 0.3s;
}
.grow:hover,
.grow:focus-visible {
  background-size: 100% 2px;
}

単色の linear-gradient を「高さ 2px・幅 0」の背景として置き、ホバーで幅を 100% にします。太さ 3px の赤で計測した結果です（文字の幅は 287px）。

背景サイズで左から伸びる   線なし → 幅213 上端y=72 太さ3 → 幅287 上端y=72 太さ3

ホバー直後は線なし、途中で 213px、完了後に 287px と伸びました。背景はインライン要素の各行に描かれるので、リンクが折り返しても1行目から順に伸びます。

5. ホバーで中央から線が伸びる（1行向け）

.center {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.center::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.3s;
}
.center:hover::after,
.center:focus-visible::after {
  transform: scaleX(1);
}

中央から: x88-278 太さ3 → x40-326 太さ3

文字は x=40 から 326 の範囲にあり、途中では中央寄りの 88〜278 だけに線が出ています。transform は再レイアウトを起こさないため、動きがなめらかです。

6. 左から入って右へ抜ける

.slide::after {
  /* 5 の .center::after と同じ指定に、次の1行を足す */
  transform-origin: right;
}
.slide:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.slide 本体には 5 の .center と同じ3行（position: relative など）を書きます。

左から入り右へ抜ける: 線なし → x40-230 太さ3 → x40-326 太さ3 →(離す) x231-326 太さ3 → 線なし

ホバー中は左端（x=40）から伸び、マウスを離すと右側（x=231〜326）に残りながら消えていきました。 transform-origin をホバー時だけ切り替えるのが仕組みです。

7. 下線の位置・色・太さを動かす

/* 線が下へ離れる */
.drop { text-decoration: underline; text-underline-offset: 2px; transition: text-underline-offset 0.3s; }
.drop:hover { text-underline-offset: 10px; }

/* 線がふわっと現れる */
.fade { text-decoration: underline transparent; text-decoration-thickness: 2px; transition: text-decoration-color 0.3s; }
.fade:hover { text-decoration-color: currentColor; }

/* 線が太くなる */
.thick { text-decoration: underline; text-decoration-thickness: 1px; transition: text-decoration-thickness 0.3s; }
.thick:hover { text-decoration-thickness: 6px; }

text-underline-offset が動く         幅287 上端y=70 太さ3 → 幅287 上端y=76 太さ3 → 幅287 上端y=78 太さ3
text-decoration-color がフェード       線なし → 幅286 上端y=70 太さ3 → 幅287 上端y=70 太さ3
text-decoration-thickness が太くなる   幅287 上端y=69 太さ1 → 幅287 上端y=71 太さ6 → 幅287 上端y=71 太さ6

位置は y=70 → 76 → 78 と途中の値を通っており、text-underline-offset が transition で補間されることがわかります。色と太さも変化しました。text-decoration だけで作る動きは、折り返すリンクでも各行で同じように動くのが利点です。

8. マーカーが引かれていくアニメ

.marker-anim {
  background: linear-gradient(transparent 60%, #fde047 60%) no-repeat left / 0 100%;
  transition: background-size 0.6s;
}
.marker-anim.is-on {
  background-size: 100% 100%;
}

マーカーが引かれるアニメ（2行）: 線なし → x40-297 太さ12 / x40-90 太さ12 → x40-297 太さ12 / x40-199 太さ12

途中の時点で1行目は端まで、2行目は途中まで引かれており、ペンで書くように1行目から順に進みます。 is-on クラスは、画面に入ったときに IntersectionObserver で付けると、スクロールに合わせて引かれる演出になります。

const io = new IntersectionObserver((entries) => {
  for (const e of entries) {
    if (e.isIntersecting) { e.target.classList.add('is-on'); io.unobserve(e.target); }
  }
}, { threshold: 1 });
document.querySelectorAll('.marker-anim').forEach((el) => io.observe(el));

（この JavaScript 部分は、クラスを付けたあとの描画のみ確認しています。）

9. 見出しの2色線

.heading {
  position: relative;
  padding-bottom: 10px;
  border-bottom: 4px solid #e5e7eb;
}
.heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 30%;
  height: 4px;
  background: #e11d48;
}

見出し2色線: x40-159 太さ4

幅 400px の見出しで、左から 30%（120px）だけ色つきの線が重なりました。全幅の薄い線は border-bottom、アクセントは ::after という組み合わせです。

10. 破線・点線・波線

.dashed { text-decoration: underline dashed; text-underline-offset: 0.3em; }
.dotted { text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.wavy   { text-decoration: underline wavy #e11d48; text-underline-offset: 0.3em; }

/* 線と文字の間隔を padding で決めたいとき */
.dashed-border { border-bottom: 2px dashed currentColor; padding-bottom: 6px; }

用語の補足説明には点線、入力まちがいの指摘には波線、というように形で意味を分けると伝わりやすくなります。

つまずきやすいポイントと直し方

親の下線が子に及ぶ様子も計測しました。親の段落に下線を引き、2つ目の span に text-decoration: none、3つ目に display: inline-block を指定しています。

親の下線は子に伝わるか: 線の範囲 x 40-260  各spanの範囲 [[40,130],[130,261],[261,428]]

none を指定した2つ目の span（x=130〜261）にも線が引かれ、inline-block の3つ目からは線が消えました。

アクセシビリティの配慮

よくある質問

Q. 下線と文字の間隔だけを広げるには？ A. text-underline-offset: 0.3em; のように書きます。計測では、指定した長さがそのままベースラインから線までの距離になりました。Chrome 87、Firefox 70、Safari 12.1 以降で使えます。

Q. マーカーは linear-gradient と text-decoration のどちらで作るのがよいですか？ A. 引かれていくアニメをつけたい、または対応ブラウザを広く取りたいなら linear-gradient、位置と太さを文字サイズ基準で指定したい、背景を別の用途に使いたいなら text-decoration が向いています。どちらも折り返した各行に帯が入ることを確認しています。

Q. リンクの下線を消して、ホバーのときだけ出すには？ A. a { text-decoration: none; } と a:hover { text-decoration: underline; } です。ふわっと出したい場合は、コピペ集7の text-decoration-color を透明から変化させる書き方が使えます。

Q. text-decoration-skip-ink: all は使えますか？ A. MDN の対応表では Chrome 148、Firefox 75、Safari 15.4 からです。この記事で使った Chromium 141 では計算値が auto になり、適用されませんでした。未対応のブラウザでは単に無視されるので、書いておいて差し支えはありません。

まとめ

• 太さは text-decoration-thickness、位置は text-underline-offset、色は text-decoration-color で調整する
• text-underline-offset の長さは、ベースラインから線までの距離にそのまま反映された（4px で +4px、0.25em で +10px）
• 一括指定は書かなかった項目を初期値に戻す。 太さを別に書くなら一括指定より後ろに置く
• 折り返す文に線を引くなら text-decoration か linear-gradient。 ::after は1行だけに線が出た
• マーカー風は linear-gradient(transparent 60%, 色 60%) が手軽。下線だけで作る方法もある
• 伸びる線は background-size か ::after の scaleX、位置・色・太さの変化は text-decoration のまま transition できる
• 本文中のリンクは下線を残し、:focus-visible にも同じ変化をつける

株式会社RJCでは、CSSの下線や装飾の細かな調整方法を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。