下線が伸びるリンクをCSSだけで｜コピペで使える5種類と、文章の中のリンクの注意点

メニューの文字にマウスを乗せると、下に線がすっと伸びる。この動きは、CSSだけで作れます。JavaScriptは要りません。

使いどころ

メニューや「一覧へ」のような、リンクだと分かる場所で使う。文章の中のリンクは、最初から下線を出しておき、乗せたときは線を太くする程度にとどめる。

使う部品は、前回までと同じ :hover（ホバー＝マウスを乗せた状態）と transition（トランジション＝変化を滑らかにつなぐ指定）。そこに、背景に線を1本描く linear-gradient（リニアグラデーション）と、その大きさを決める background-size を組み合わせます。

連載「WEBの技術」の4回目です。
2回目のボタンに続いて、今回はもう1つの「押せるもの」、文字のリンクを取り上げます。

完成見本：下線が伸びるリンク5種類

下の5つは、ページを開いた時点から、「普段 → マウスを乗せたとき → 普段」を自動でくり返しています。実際にマウスを乗せて試せるリンクは、後半の「応用」に置いています。

サービス一覧

FROM LEFT1. 左から伸びる

制作実績

FROM CENTER2. 真ん中から広がる

会社概要

IN AND OUT3. 左から出て、右へ消える

お知らせ

MARKER4. 線が太くなってマーカーに

くわしくは料金のページをご覧ください。

UNDERLINE5. 最初からある下線が動く

変化の前と後を、止めて並べるとこうなります。

元の状態

乗せたとき

1. 左から伸びる

2. 真ん中から広がる

3. 左から出て、右へ消える

4. 線が太くなってマーカーに

5. 最初からある下線が動く

※ スマホやパソコンで「動きを減らす」設定をオンにしている方には、線が伸びる動きをなくし、すぐに切り替わる形で表示しています。理由は後半の「見る人への配慮」で説明します。

コピペ用のコード

見本ごとに、HTMLとCSSを並べました。HTMLはリンクを置きたい場所に、CSSはサイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。href="#" は、実際のリンク先に書きかえてください（この記事の見本は、押すと「応用」の節へ移るようにしています）。

CSSの前半にある .kd-lu は、5種類に共通する文字の色と、キーボードで選んだときの枠です。同じページで何種類か使うときは、1回だけ入れれば足ります。クラス名の頭の kd-lu- は、サイトのほかのデザインと名前がぶつからないようにするための目印です。

1. 左から伸びる

文字の下に、左から右へ線が伸びます。文章を読む向きと同じなので、いちばん自然に見える、基本の形です。

サービス一覧

自動で再生中

HTML

<a class="kd-lu kd-lu-left" href="#">サービス一覧</a>

CSS

.kd-lu {
  color: #0369A1;
  font-weight: 700;
  text-decoration: none;
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-lu:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 3px;
  border-radius: 2px;
}
.kd-lu-left {
  background-image: linear-gradient(#0284C7, #0284C7);
  background-repeat: no-repeat;
  padding-bottom: 4px;
  background-position: left bottom;
  background-size: 0% 2px;
  transition: background-size 0.3s ease;
}
.kd-lu-left:hover,
.kd-lu-left:focus-visible {
  background-size: 100% 2px;
}
/* 動きを減らす設定の人には、伸びる動きをなくして、すぐ切り替える */
@media (prefers-reduced-motion: reduce) {
  .kd-lu-left {
    transition: none;
  }
}

2. 真ん中から広がる

線が真ん中から、左右へ同時に広がります。左右対称なので、中央にそろえたメニューやボタンの下に置くと、まとまって見えます。

制作実績

自動で再生中

HTML

<a class="kd-lu kd-lu-center" href="#">制作実績</a>

CSS

.kd-lu {
  color: #0369A1;
  font-weight: 700;
  text-decoration: none;
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-lu:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 3px;
  border-radius: 2px;
}
.kd-lu-center {
  background-image: linear-gradient(#0284C7, #0284C7);
  background-repeat: no-repeat;
  padding-bottom: 4px;
  background-position: center bottom;
  background-size: 0% 2px;
  transition: background-size 0.3s ease;
}
.kd-lu-center:hover,
.kd-lu-center:focus-visible {
  background-size: 100% 2px;
}
/* 動きを減らす設定の人には、伸びる動きをなくして、すぐ切り替える */
@media (prefers-reduced-motion: reduce) {
  .kd-lu-center {
    transition: none;
  }
}

3. 左から出て、右へ消える

乗せると左から線が伸び、離すと右へ抜けるように消えます。行って戻るのではなく「通り抜ける」動きなので、横に並んだメニューで軽く見えます。

会社概要

自動で再生中

HTML

<a class="kd-lu kd-lu-through" href="#">会社概要</a>

CSS

.kd-lu {
  color: #0369A1;
  font-weight: 700;
  text-decoration: none;
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-lu:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 3px;
  border-radius: 2px;
}
.kd-lu-through {
  background-image: linear-gradient(#0284C7, #0284C7);
  background-repeat: no-repeat;
  padding-bottom: 4px;
  background-position: right bottom;
  background-size: 0% 2px;
  transition: background-size 0.3s ease;
}
.kd-lu-through:hover,
.kd-lu-through:focus-visible {
  background-position: left bottom;
  background-size: 100% 2px;
}
/* 動きを減らす設定の人には、伸びる動きをなくして、すぐ切り替える */
@media (prefers-reduced-motion: reduce) {
  .kd-lu-through {
    transition: none;
  }
}

4. 線が太くなってマーカーに

文字の下の淡い太線が、乗せると文字の後ろ全体に広がり、蛍光ペンを引いたように見えます。押せる場所の広さが、目で分かります。

お知らせ

自動で再生中

HTML

<a class="kd-lu kd-lu-marker" href="#">お知らせ</a>

CSS

.kd-lu {
  color: #0369A1;
  font-weight: 700;
  text-decoration: none;
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-lu:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 3px;
  border-radius: 2px;
}
.kd-lu-marker {
  background-image: linear-gradient(#BAE6FD, #BAE6FD);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0.35em;
  transition: background-size 0.3s ease, color 0.3s ease;
}
.kd-lu-marker:hover,
.kd-lu-marker:focus-visible {
  background-size: 100% 100%;
  color: #075985;
}
/* 動きを減らす設定の人には、伸びる動きをなくして、すぐ切り替える */
@media (prefers-reduced-motion: reduce) {
  .kd-lu-marker {
    transition: none;
  }
}

5. 最初からある下線が動く

最初から細い下線が付いていて、乗せると線が太くなり、文字に近づきます。文章の中のリンクは、この形にします。理由は後半の「見る人への配慮」で説明します。

くわしくは料金のページをご覧ください。

自動で再生中

HTML

<p class="kd-lu-text">くわしくは<a class="kd-lu kd-lu-deco" href="#">料金のページ</a>をご覧ください。</p>

CSS

.kd-lu {
  color: #0369A1;
  font-weight: 700;
  text-decoration: none;
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-lu:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 3px;
  border-radius: 2px;
}
.kd-lu-deco {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: #0284C7;
  text-underline-offset: 6px;
  transition: text-decoration-thickness 0.2s ease, text-decoration-color 0.2s ease, text-underline-offset 0.2s ease;
}
.kd-lu-deco:hover,
.kd-lu-deco:focus-visible {
  text-decoration-thickness: 3px;
  text-decoration-color: #075985;
  text-underline-offset: 3px;
}
/* 動きを減らす設定の人には、伸びる動きをなくして、すぐ切り替える */
@media (prefers-reduced-motion: reduce) {
  .kd-lu-deco {
    transition: none;
  }
}

※ お使いのテーマがリンクに下線や色を付けていると、見本どおりに見えないことがあります。そのときは、テーマ側の指定より強くなるよう、セレクタの頭に本文の枠のクラス（たとえば .entry-content）を足してください。

仕組み：下線ではなく「背景に描いた線」を伸ばす

1〜4の見本は、CSSの「下線」の機能を使っていません。背景に細長い線を1本描き、その幅を0%から100%へ広げているのがポイントです。

linear-gradient で、1色の線を作る

linear-gradient は、本来は色が移り変わる帯（グラデーション）を作る指定です。始まりと終わりに同じ色を書くと、色の変わらない1色の「画像」になります。これを背景に置きます。

background-image: linear-gradient(#0284C7, #0284C7);
background-repeat: no-repeat;

no-repeat は、この画像を並べてくり返さない指定です。書かないと、線が何本も並んでしまいます。

background-size と background-position で、大きさと置き場所を決める

書いたもの	意味
background-size: 0% 2px	横幅0%・高さ2pxの線。最初は見えない
background-size: 100% 2px	乗せたときは、横幅を文字いっぱいまで広げる
background-position: left bottom	線を左下に置く。左を起点に伸びる
background-position: center bottom	線を真ん中の下に置く。左右へ同時に広がる
padding-bottom: 4px	文字と線の間を少し空ける

つまり、「左から伸びる」と「真ん中から広がる」の違いは、background-position の1か所だけです。

「左から出て、右へ消える」は、普段は線を右下、乗せたときは左下に置き、滑らかに変えるのを background-size だけにしています。乗せた瞬間に線の起点が左へ移って左から伸び、離した瞬間に起点が右へ移って右へ縮みます。置き場所まで滑らかに変えると、線が右から現れてしまうので、ここは分けて書くのがコツです。

背景で描くと、2行に折り返しても線が付く

同じ動きは、::after（アフター）で線の部品を足して作る方法もよく紹介されています。ただしその方法では、リンクの文字が2行に折り返したとき、線が行ごとには描かれず、位置や長さがずれます。背景で描く方法なら、行ごとに線が付きます。スマホで長いリンクが折り返す場面を考えて、この記事では背景の方法を選びました。

5番目は、最初からある下線を変化させる

5番目だけは、ふつうの下線（text-decoration）を使っています。text-decoration-thickness が線の太さ、text-underline-offset が文字と線の距離です。どちらも変化を滑らかにつなげられる指定で、乗せると線が太くなりながら文字に近づきます。

ここで使った background-size と background-position は2015年7月から、text-decoration-thickness は2021年3月から、text-underline-offset は2020年11月から、主要なブラウザで使える機能とMDNで示されています。

数値を変えるとどうなるか

「左から伸びる」の数値を1つずつ変えて並べました。ここの見本も、自動でくり返しています。

速さ：transition の秒数

サービス一覧

0.15秒

サービス一覧

0.3秒
（見本）

サービス一覧

0.8秒

0.15秒だと、伸びる途中がほとんど見えず、線がぱっと出たように見えます。0.8秒だと、マウスを横に動かしてメニューをなぞったときに、線が追いつきません。リンクの下線なら0.2〜0.3秒あたりが、伸びる動きが見えて、待たされる感じもない、というのがKAKERUの判断です。

線の太さ：background-size の高さ

サービス一覧

1px

サービス一覧

2px
（見本）

サービス一覧

4px

1pxだと、伸びる動きが目に入りにくくなります。4pxまで太くすると、線のほうが文字より目立ちます。本文が16px前後なら、2pxがちょうど釣り合います。

線の色

サービス一覧

#0EA5E9
ブランドの青

サービス一覧

#0284C7
（見本）

サービス一覧

#0F172A
濃い紺

KAKERUのブランドカラーの青 #0EA5E9 は、白い背景との差（コントラスト比）が約2.8:1で、細い線にすると薄く見えます。見本では、一段濃い #0284C7（約4.1:1）を使いました。濃い紺にすると線がくっきりしますが、文字の青と色が分かれて、別々のものに見えます。

スマホと、見る人への配慮

リンクは、押せることが伝わって初めて役に立ちます。下線の動きをつけるときに、気をつけたいことを4つにまとめます。

文章の中のリンクは、色だけで区別しない

WCAG（ウェブのアクセシビリティの国際的な基準）には、「色だけで情報を伝えない」という基準（1.4.1）があります。W3Cの解説では、リンクとまわりの文字を色だけで見分けさせる場合は、色の明るさの差を3:1以上にすることなどが示されています。

この記事の見本の青 #0369A1 と、ふつうの本文によくある灰色がかった紺 #33495B の差は、計算すると約1.6:1です。色の違いだけでは、見分けにくい人がいます。1〜4のように普段は下線がない形を、文章の中のリンクに使うと、リンクだと気づかれにくくなります。文章の中では、5番目のように最初から下線を出しておきます。

スマホには「マウスを乗せる」がない

スマホは指で触るので、マウスを乗せている状態がありません。1〜4の線は、スマホではほとんど見る機会がない、と考えておきます。メニューのように、置き場所や見た目でリンクだと分かる場所に使うのはそのためです。

押したあとに線が残るのが気になるときは、@media (hover: hover) で囲むと、マウスのようにホバーできる機器のときだけ変化させられます。このときも、:focus-visible の指定は外に残しておきます。

@media (hover: hover) {
  .kd-lu-left:hover {
    background-size: 100% 2px;
  }
}

キーボードで選んだときも、同じ変化を

見本ではいつも、:hover と :focus-visible（フォーカス・ビジブル＝キーボードのTabキーなどで選んだ状態）を並べて書いています。さらに、選んだときの枠（outline）も消さずに残しています。WCAGには、いまどこを選んでいるかが見えるようにする基準（2.4.7）があります。

「動きを減らす」設定の人には、すぐ切り替える

画面の動きが苦手な人は、スマホやパソコンで「動きを減らす」設定をオンにしていることがあります。CSSの prefers-reduced-motion を使うと、この設定の人にだけ別の見え方を出せます。見本では、この設定の人には transition: none で伸びる動きをなくし、乗せたら線がすぐ出る形にしています。線が出ること自体は残るので、反応したことは伝わります。

下線の動きは小さいので、つい何も考えずに付けがちです。
「この場所なら、下線がなくてもリンクだと分かるか」を先に確かめてから使います。

応用：実際にマウスを乗せて試す

ここのリンクは自動では動きません。パソコンならマウスを乗せて、キーボードならTabキーで1つずつ選んで、変化を確かめてみてください。「左から出て、右へ消える」は、マウスを離したときの動きも見てください。

サービス一覧制作実績会社概要お知らせ

くわしくは料金のページをご覧ください。

AIに頼むなら

同じようなリンクは、Claudeなどの生成AIに頼んでもすぐ作れます。そのときは、見た目だけでなく、置き場所・数値・配慮まで伝えると、直す回数が減ります。

ヘッダーのメニューのリンクに、マウスを乗せると左から下線が伸びる動きをつけたい。
HTMLとCSSだけで。線は2px・#0284C7、0.3秒。2行に折り返しても線が付く書き方で。
キーボードで選んだときも同じ変化にして、動きを減らす設定の人には動かさずに線だけ出して。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

文章の中のリンクまで、下線が消されていないか。a { text-decoration: none; } のように、サイト全体のリンクに効く書き方になっていたら、メニューの中だけに絞ります
長いリンクが2行に折り返したとき、線が付くか。スマホの幅で確かめます。::after で作られていると、線が行ごとに描かれず、ずれることがあります
Tabキーで選んだときに、枠と線が出るか。outline: none が入っていたら、かわりの見た目があるかを見ます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

ヘッダーやフッターのメニューには「左から伸びる」か「真ん中から広がる」。文字を左にそろえたメニューなら左から、中央にそろえたメニューなら真ん中から、と配置に合わせます
横に並んだメニューで、軽さを出したいときに「左から出て、右へ消える」。マウスを横に動かしたとき、線が流れるようにつながって見えます
文章の中のリンクは「最初からある下線が動く」。普段から下線があるので、色の見え方にかかわらずリンクだと分かります