CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld

ここ最近主にナビゲーションなどでホバー時にアンダーラインをアニメーションさせるエフェクトの実装要望が多いので、パッと使えるようによく利用するものをひと通りまとめたのでシェアします。 また、大体この手のアニメーションを利用する際はサイト全体で動きを統一させることが多いのですが、たまに場所によって少し違いをつけたいということもあるので、そういったときにすぐ対応できるようにSassのmixinを用いて実装する方法も併せて紹介します。 ここで紹介しているサンプルで使用しているHTMLは、すべて<a href="#">Lorem ipsum</a>のようなシンプルなa要素を使用した想定になっています。

[idocci22]

“a::after { position: absolute; bottom: -4px; left: 0; content: ''; width: 100%; height: 2px; background: #333; transform: scale(0, 1); transform-origin: left top; transition: transform .3s; } a:hover::after { transform: scale(1, 1); }”

[glitters_mode]

“position: relative; display: inline-block; text-decoration: none;”

[sutara_lumpur]

アンダーラインに限らずCSSアニメーション全般の参考になる。ありがたや。

[maritimecolor]

使えそう！

[winterfall]

そんなにうるさくないので、使い勝手がよさそう