CSS Web制作

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

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

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

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

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

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

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

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

まず、基本となる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-originleftrightにしただけです。

デモはこちら。

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倍に変形(表示) */
}

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

デモはこちら。

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種類ご紹介してきました。

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

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作