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-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です。