マウスホバーで下線がふわっとフェードインするリンク

See the Pen マウスホバーで下線がフェードイン by チータツ (@cheese_fuji) on CodePen.

CSSの解説

<a href="#">下線がフェードイン</a>

a {
  position: relative;
  text-decoration: none;
}
/*** 下線（疑似要素） ***/
a:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: black;
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}
/*** ホバー時の下線 ***/
a:hover::after {
  visibility: visible;
  opacity: 1;
}

下線表示のtext-decoration: underlineはアニメーション非対応なので、リンクの下に設置した空白の疑似要素を下線形にしてアニメーションさせます。

• リンクa
  • デフォルトの下線を消すためにtext-decoration: noneを指定
  • 疑似要素を配置するためにposition: relativeを指定
• リンクの疑似要素a:after
  • position: absoluteを使って文字の少し下に設置
  • widthとheightで横長にする、これがそのまま下線の大きさになる
  • backgroundで背景色（下線の色）を指定
  • visibilite: hiddenで非表示に
  • opacity: 0で透明に
  • transitionでアニメーション時間を指定
• リンクをホバー時の疑似要素a:hover:after
  • visibility: visibleで表示
  • opacity: 1で不透明に

今回は疑似要素が対象なだけで、基本的な内容は普通のフェードインアニメーションです。フェードインの仕組みについては、こちらを参考にしてください。

フェードインアニメーションのCSS

応用CSS

フェードイン関連のアニメーションを下線(疑似要素)に使用することで、様々な動きを付けることができるようになります。

今回はtransitionを使っていますが、更に複雑な動きを付ける場合は@keyframesを使ってアニメーションさせるのがおすすめです。

下線がフェードインアップ

疑似要素a:afterの位置を下へ 10px 、ホバー時a:hover:afterの位置を下へ 4px にすることで、その差の6px分上昇するように動きます。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

フェードインダウン

フェードインアップとは反対に、初期位置は下へ -2px 、ホバー時の位置を下へ 4px にすることで、6px 落ちるように動きます。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

おすすめの使い方

• 大きめの文字のリンク
• ヘッダーメニューなどの横並びのリンク