CSS Web制作

CSSのみ！テキストホバー時のアンダーライン(下線)アニメーションまとめ【複数行あり】

2024年2月28日

※ 当サイトではアフィリエイト広告を利用しています

テキストにカーソルを乗せて下線アニメーションってどうやるの？

例えば、ヘッダーメニューにカーソルをhoverさせたら、下線が表示されるという実装はよくあります。

この下線ですが、ただパッと表示されるのではなく、アニメーションで実装されることが多いです。

今回は、実務でもよく使われるテキストホバー時のアンダーライン(下線)アニメーションを、11種類ご紹介します。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！
完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

テキストのホバー下線アニメーションの作り方

まず、基本となるHTMLはこちらです。

<a href="#">じゅんぺいブログ</a>

複数行の解説をするときは文字数を増やしますが、それだけです。

なので、これからご紹介するコードはCSSのみになります。

共通のCSSはこちらです。

a {
  color: #333; /* 文字色 */
  display: inline-block; /* これがないとリンク範囲が全幅になる */
  font-size: 36px; /* 文字サイズ */
  position: relative; /* 相対位置指定 */
  text-decoration: none; /* デフォルトのテキストの下線を消す */
}

ただし、複数行ではdisplay: inline-block;とposition: relative;は不要です。

 

上からフェードイン

CSSはこちら。

/* 下線のスタイル */
a::after {
  background-color: #333; /* 下線の色 */
  bottom: 2px; /* 要素の下端からの距離 */
  content: ""; /* 要素に内容を追加 */
  height: 2px; /* 下線の高さ */
  left: 0; /* 要素の左端からの距離 */
  opacity: 0; /* 不透明度 */
  position: absolute; /* 絶対位置指定 */
  transition: all .3s; /* アニメーション効果を追加 */
  width: 100%; /* 要素の幅 */
}
/* リンクにホバーした際の下線の表示 */
a:hover::after {
  bottom: -4px; /* 下線を上から下に移動 */
  opacity: 1; /* 不透明度を変更してフェードイン */
}

デモはこちら。

See the Pen
テキスト下に上からフェードイン by junpei (@junpei-sugiyama)
on CodePen.

 

下からフェードイン

CSSはこちら。

/* 下線のスタイル */
a::after {
  background-color: #333; /* 下線の色 */
  bottom: -8px; /* 要素の下端からの距離 */
  content: ""; /* 要素に内容を追加 */
  height: 2px; /* 下線の高さ */
  left: 0; /* 要素の左端からの距離 */
  opacity: 0; /* 不透明度 */
  position: absolute; /* 絶対位置指定 */
  transition: all .3s; /* アニメーション効果を追加 */
  width: 100%; /* 要素の幅 */
}
/* リンクにホバーした際の下線の表示 */
a:hover::after {
  bottom: -4px; /* 下線を上から下に移動 */
  opacity: 1; /* 不透明度を変更してフェードイン */
}

先ほどとの違いは、bottom: 2px;がbottom: -8px;になっただけです。

hover後より上から始まるか、下から始まるかの違いですね。

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

 

左から右にスライドで伸びる

CSSはこちら。

/* 下線のスタイル */
a::after {
  background-color: #333; /* 下線の色 */
  bottom: -4px; /* 要素の下端からの距離 */
  content: ""; /* 要素に内容を追加 */
  height: 2px; /* 下線の高さ */
  left: 0; /* 要素の左端からの距離 */
  position: absolute; /* 絶対位置指定 */
  transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
  transform-origin: left top; /* 変形の原点を左上に指定 */
  transition: transform .3s; /* 変形をアニメーション化 */
  width: 100%; /* 要素の幅 */
}
/* リンクにホバーした際の下線の表示 */
a:hover::after {
  transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
}

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

 

右から左にスライドで伸びる

CSSはこちら。

/* 下線のスタイル */
a::after {
  background-color: #333; /* 下線の色 */
  bottom: -4px; /* 要素の下端からの距離 */
  content: ""; /* 要素に内容を追加 */
  height: 2px; /* 下線の高さ */
  left: 0; /* 要素の左端からの距離 */
  position: absolute; /* 絶対位置指定 */
  transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
  transform-origin: right top; /* 変形の原点を右上に指定 */
  transition: transform .3s; /* 変形をアニメーション化 */
  width: 100%; /* 要素の幅 */
}
/* リンクにホバーした際の下線の表示 */
a:hover::after {
  transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
}

あまり使う機会はないと思いますが、先ほどとの違いはのtransform-originをleftにrightにしただけです。

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

 

左から右にスライドで伸びて離したら右に消えていく

先ほどは左から右にスライドして、離したら左に戻りましたが、今回は右に消えていきます。

CSSはこちら。

/* 下線のスタイル */
a::after {
  background-color: #333; /* 下線の色 */
  bottom: -4px; /* 要素の下端からの距離 */
  content: ""; /* 要素に内容を追加 */
  height: 2px; /* 下線の高さ */
  left: 0; /* 要素の左端からの距離 */
  position: absolute; /* 絶対位置指定 */
  transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
  transform-origin: right top; /* 変形の原点を右上に指定 */
  transition: transform .3s; /* 変形をアニメーション化 */
  width: 100%; /* 要素の幅 */
}
/* リンクにホバーした際の下線の表示 */
a:hover::after {
  transform-origin: left top; /* 変形の原点を左上に指定 */
  transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
}

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

 

右から左にスライドで伸びて離したら左に消えていく

今度は右から左にスライドして、離したら左に消えていきます。

CSSはこちら。

/* 下線のスタイル */
a::after {
  background-color: #333; /* 下線の色 */
  bottom: -4px; /* 要素の下端からの距離 */
  content: ""; /* 要素に内容を追加 */
  height: 2px; /* 下線の高さ */
  left: 0; /* 要素の左端からの距離 */
  position: absolute; /* 絶対位置指定 */
  transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
  transform-origin: left top; /* 変形の原点を左上に指定 */
  transition: transform .3s; /* 変形をアニメーション化 */
  width: 100%; /* 要素の幅 */
}
/* リンクにホバーした際の下線の表示 */
a:hover::after {
  transform-origin: right top; /* 変形の原点を右上に指定 */
  transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
}

先ほどとの違いは、rightとleftを逆にしただけです。

デモはこちら。

See the Pen
テキスト下に右から左に伸びて離したら左に消えていく by junpei (@junpei-sugiyama)
on CodePen.

 

中央から両端にスライドで伸びる

CSSはこちら。

/* 下線のスタイル */
a::after {
  background-color: #333; /* 下線の色 */
  bottom: -4px; /* 要素の下端からの距離 */
  content: ""; /* 要素に内容を追加 */
  height: 2px; /* 下線の高さ */
  left: 0; /* 要素の左端からの距離 */
  position: absolute; /* 絶対位置指定 */
  transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
  transform-origin: center top; /* 変形の原点を中央上に指定 */
  transition: transform .3s; /* 変形をアニメーション化 */
  width: 100%; /* 要素の幅 */
}
/* リンクにホバーした際の下線の表示 */
a:hover::after {
  transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
}

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

 

上下左右からスライドで伸びる

CSSはこちら。

/* 上下の線のスタイル */
a::before,
a::after {
  background-color: #333; /* 下線の色 */
  content: ""; /* 要素に内容を追加 */
  height: 2px; /* 下線の高さ */
  position: absolute; /* 絶対位置指定 */
  transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
  transition: transform .3s; /* 変形をアニメーション化 */
  width: 100%; /* 要素の幅 */
}
/* 上線のスタイル */
a::before {
  left: 0; /* 要素の左端からの距離 */
  top: -6px; /* 要素の上端からの距離 */
  transform-origin: left top; /* 変形の原点を左上に指定 */
}
/* 下線のスタイル */
a::after {
  bottom: -6px; /* 要素の下端からの距離 */
  right: 0; /* 要素の右端からの距離 */
  transform-origin: right top; /* 変形の原点を右上に指定 */
}
/* リンクにホバーした際の上下の線の表示 */
a:hover::before,
a:hover::after {
  transform: scale(1, 1); /* 上下の線を横方向に1倍、縦方向に1倍に変形（表示） */
}

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

 

上下左右からスライドで伸びて離したら反対側に消える

CSSはこちら。

/* 上下の線のスタイル */
a::before,
a::after {
  background-color: #333; /* 下線の色 */
  content: ""; /* 要素に内容を追加 */
  height: 2px; /* 下線の高さ */
  position: absolute; /* 絶対位置指定 */
  transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
  transition: transform .3s; /* 変形をアニメーション化 */
  width: 100%; /* 要素の幅 */
}
/* 上線のスタイル */
a::before {
  left: 0; /* 要素の左端からの距離 */
  top: -6px; /* 要素の上端からの距離 */
  transform-origin: left top; /* 変形の原点を左上に指定 */
}
/* 下線のスタイル */
a::after {
  bottom: -6px; /* 要素の下端からの距離 */
  right: 0; /* 要素の右端からの距離 */
  transform-origin: right top; /* 変形の原点を右上に指定 */
}
/* リンクにホバーした際の上下の線の表示 */
a:hover::before,
a:hover::after {
  transform: scale(1, 1); /* 上下の線を横方向に1倍、縦方向に1倍に変形（表示） */
}
/* リンクにホバーした際の上線の表示 */
a:hover::before {
  transform-origin: right top; /* 変形の原点を右上に指定 */
}
/* リンクにホバーした際の下線の表示 */
a:hover::after {
  transform-origin: left top; /* 変形の原点を左上に指定 */
}

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

 

複数行のテキストアニメーション

今度は、複数行のテキストアニメーションです。

例えば、先ほど解説した左から右にスライドして伸びるやつだと、このようになってしまいます。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

これを、全ての文章に下線を引くようにするには、CSSをこのようにします。

a {
  background-image: linear-gradient(90deg, #333, #333); /* 線の色 */
  background-position: left bottom; /* 線の起点を左・下に設定 */
  background-repeat: no-repeat;
  background-size: 0 2px; /* 線の横幅を0、縦幅を2pxに */
  padding-bottom: 6px; /* 下線を下にズラす */
  transition: background-size .6s; /* 変形をアニメーション化 */
}
/* 下線のスタイル */
a:hover {
  background-size: 100% 2px; /* 線の横幅を100%にする */
}

これまでとはかなり書き方が変わっています。

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

もちろん、複数行じゃなくてもOKです。

 

複数行のテキストアニメーション（グラデーション）

先ほどの複数行では、linear-gradientというグラデーションで使われるコードがありました。

そして先ほどはlinear-gradient(90deg, #333, #333)と最初と最後の色を同じにしましたが、これをlinear-gradient(90deg, red, blue)とするとこのようになります。

See the Pen
複数行のテキストアニメーション（グラデーション） by junpei (@junpei-sugiyama)
on CodePen.

3色以上にすることも可能です。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

グラデーションについては、以下の記事で詳しく解説しています。

あわせて読みたい
【コピペOK！】CSSグラデーションの作り方まとめ
CSSグラデーションの作り方まとめ【コピペOK！】

続きを見る

まとめ

今回は、テキストホバー時のアンダーライン(下線)アニメーションを11種類ご紹介してきました。

コピペすれば簡単に実装できますが、考えて実装しようとするとなかなかパッとできないと思うので、この記事をブクマしておくといいかと思います。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X（旧Twitter）フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-CSS, Web制作