本記事では、マウスを乗せたとき・外したときの両方でアニメーションを付ける方法をご紹介します。

結論

下記では以下のアニメーションを付与しています。

See the Pen MouseOverAnimation by kaz12 Tech (@kaz12-Tech) on CodePen.

処理概要としては、::beforeで左端に置いておいた疑似要素を、
マウスオーバー時に右端まで引き延ばしてアニメーションを表現しています。
同様にマウスを外した際に、疑似要素を右端に折りたたむことでアニメーションを表現しています。