【ホバーアニメーション】リンク下線のホバーアニメーションを作る方法｜CSSの擬似要素＋transformで簡単実装

2025-08-142025-08-16

記事内にプロモーションを含む場合があります。

【ホバーアニメーション】リンク下線のホバーアニメーションを作る方法｜CSSの擬似要素＋transformで簡単実装

ワンクリックで目的地へGO！

はじめに｜リンクに下線が「スッ」と出る演出、見たことありますか？

Webサイトを見ていると、リンクにカーソルを合わせた瞬間、
「スッ」と下線がスライドして表示されるような動きを見かけたことはありませんか？

こうしたホバーアニメーションは、見た目をおしゃれにするだけでなく、ユーザーに“今ここに注目してね”と自然に伝える視覚的な効果もあります。

この記事では、そんな「スライドする下線アニメーション」を、
HTMLとCSSだけで実装する方法をわかりやすく解説していきます。

CSSの擬似要素（::after）
transform・transitionの基本
そのまま使えるコピペ用コード
応用アレンジのヒント

なども盛り込んでいるので、

「初心者だけど、リンクにちょっと動きをつけてみたい」
「CSSアニメーションの仕組みを理解してみたい」

という方にぴったりの内容になっています。

実装デモ｜カーソルを乗せると、下線がスライド表示！

マウスを乗せたときだけ表示されるあの演出、「ホバーアニメーションの下線スライド」と呼ばれるものです。

まずは、今回ご紹介する「ホバーでスッと下線が出てくる演出」がどんな動きなのか、実際に体験してみてください。

ホバーアニメーションの実例紹介

マウスをのせてみてください（※リンクはダミーです）

ホバーで下線がスライドします

このように、カーソルを乗せたときだけ下線が左から右へスライド表示されることで、リンクの存在感が増し、動きのあるおしゃれな演出になります。

このあと、HTMLとCSSを分けて、コピペして使えるコードを紹介していきます！

HTML＋CSS｜コピペで使えるコードと解説

ここでは、実際に使えるコピペOKのHTML＋CSSコードをご紹介します。
デモで使用したものと同じ動きを再現できます！

HTMLコード（リンク部分）

<!-- スライド下線付きリンク -->
<a href="#" class="underline-hover">詳しくはこちら</a>

上記の <a> タグがテキストリンク部分です。
class="underline-hover" をつけることで、あとからCSSで下線アニメーションを適用します。

CSSコード（下線アニメーション）

.underline-hover {
  position: relative;
  color: #333;
  text-decoration: none;
  font-size: 18px; /* フォントサイズ */
  font-weight: bold; /* 太字 */
}

.underline-hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px; /* 少し太めの下線 */
  background-color: #ee6eac;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.underline-hover:hover::after {
  transform: scaleX(1);
}

このコードのポイント解説

.underline-hover の position: relative; は、下線を文字の位置基準で表示するために必要です。
::after は擬似要素といって、HTMLに余計なタグを増やさずに装飾を加えられる便利な仕組みです。
transform: scaleX(0) で非表示の状態から、ホバー時に scaleX(1) で下線を横にスライドさせています。
transition を使うことで、スッと動く自然なアニメーションになります。
transform-origin: left にすることで、左から右に伸びる動きに

文字サイズや太さ、色などは好きにカスタマイズOK！
他のCSSと干渉しないように、クラス名は必要に応じて変更してください。

このコードをそのままコピーして、あなたのサイトのナビゲーションやテキストリンクに活用してみてくださいね！

よく使われる場面

この「スライドする下線アニメーション」は、シンプルだけど印象的な演出として、さまざまな場面で活用されています。以下に、よく使われるパターンと応用アイデアを紹介します。

スクロールできます

使用シーン	内容
ナビゲーションメニュー	ヘッダーメニューなどでリンク先をわかりやすく表示
テキストリンクの装飾	「詳しくはこちら」など目立たせたい本文内リンク
フッターリンク	サイト全体の統一感を出す定番デザイン

アレンジ例：デザインの幅を広げるカスタマイズ

下線アニメーションは、ちょっとした工夫でデザインの印象をグッと変えることができます。

カラー変更や太さ変更もOK

.underline-hover::after {
  height: 3px;
  background-color: #ff69b4; /* ピンク系に変更 */
}

下線の太さ（height）や色（background-color）は自由にカスタマイズできます！
あなたのサイトのデザインに合わせてアレンジしてみてください。

スライド方向（左→右、右→左、中央→両側など）

下線が左から右に伸びる以外にも、たとえば「右→左」や「中央→左右」のような演出も可能です。

左→右にスライドさせたい場合（デモ同様）

ホバーアニメーションの実例紹介

ホバーで下線：左→右

.underline-hover::after {
  transform-origin: left; 
}

右→左にスライドさせたい場合

ホバーアニメーションの実例紹介

ホバーで下線：右→左

.underline-hover::after {
  transform-origin: right; /* ←右起点に変更 */
}

中央から両側にスライドする下線

ホバーアニメーションの実例紹介

ホバーで下線：中央→両側

.underline-hover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  width: 100%;
  height: 2px;
  background-color: #5b9bd5;
  transition: transform 0.3s ease;
}

.underline-hover:hover::after {
  transform: translateX(-50%) scaleX(1);
}

点線やグラデーション風の表現

ここでは、点線風やグラデーション風など、少し遊び心のあるアレンジをご紹介します。

点線風の下線にする

repeating-linear-gradient を使えば、線がポツポツとした ドット風（点線風） に！

ホバーアニメーションの実例紹介

ホバー時に点線風がスッと表示

ホバーで下線：点線風

<!-- デモ用リンク -->
<a href="#" class="underline-hover">リンクテキスト</a>

<style>
.underline-hover {
  position: relative;
  color: #3366cc; /* 落ち着いた青 */
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  padding-bottom: 4px;
}

.underline-hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background-image: repeating-linear-gradient(
    to right,
    #ee6eac,
    #ee6eac 6px,
    transparent 6px,
    transparent 10px
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

/* ↓↓↓ ホバー時の表示アニメーションを追加！ */
.underline-hover:hover::after {
  transform: scaleX(1);
}
</style>

ポイント

6pxの線と4pxの隙間で、リズムのある点線を表現しています。

background-image: repeating-linear-gradient(
  to right,
  #ee6eac,
  #ee6eac 6px,
  transparent 6px,
  transparent 10px
);

グラデーション風にする

単色ではなく、色の移り変わりを楽しみたい場合は linear-gradient を使ってグラデーション下線に。

ホバーアニメーションの実例紹介

「ピンク → 紫」の下線グラデーションがスライドで表示

ホバーで下線：グラデーション風

<!-- デモ用リンク -->
<a href="#" class="underline-hover">リンクテキスト</a>

<style>
.underline-hover {
  position: relative;
  color: #3366cc; /* 落ち着いた青 */
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  padding-bottom: 6px;
}

.underline-hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-image: linear-gradient(to right, #ee6eac, #b266ff); /* ピンク→紫 */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.underline-hover:hover::after {
  transform: scaleX(1);
}
</style>

background-image: linear-gradient(to right, #ee6eac, #b266ff);
　→ ピンク（#ee6eac）から紫（#b266ff）へのグラデーション
transform: scaleX(1); で左から右へスライド表示のような動きに
transform-origin: left; を忘れると意図と逆方向になることも

このように、CSSの小さな工夫だけで雰囲気を変えられるのがこのホバーアニメーションの魅力です！

アニメーションを使うときの注意・補足

以下のような場合、ホバーアニメーションがうまく動作しないことがあります。カスタマイズ前にチェックしてみてください。

::afterを使うには、display: inline-block;の指定が必要な場合があります。
inlineのままだと、擬似要素のサイズや位置が正しく反映されないことがあるため、inline-blockにしておくのがおすすめです。
position: relative;を忘れると、下線の位置がズレる原因に。
擬似要素（::after）は、親要素が相対位置を持っていないと意図しない場所に表示されることがあります。
アニメーションの範囲を明確にしたい場合は transition の指定先に注意。
通常は ::after 側に指定しますが、変化させたいプロパティや要素によっては a:hover 側への記述が適していることもあります。
カスタマイズ時は、下線の色・太さ・スライド方向の変更で雰囲気が大きく変わります。
特にグラデーションや点線風にする場合は、テキストと下線のバランスを見ながら微調整すると◎。