リンク要素のhover時に下線をCSSでアニメーション表示させる方法

線を引くようなアニメーション よくグローバルメニューなどにマウスオーバーするとその要素に下線がアニメーション表示されるのを見かけます。ちょっとしたアニメーションがあるだけで、気持ちおしゃれに見えるから不思議。ということで、HTMLとCSSでの下線アニメーションをまとめておきます。 HTMLの以下のコードを使用して、CSSの設定を行います。 <ul> <li><a href="">MENU01</a></li> <li><a href="">MENU02</a></li> <li><a href="">MENU03</a></li> <li><a href="">MENU04</a></li> <li><a href="">MENU05</a></li> </ul>下線が左から右に引かれるアニメーション 左から右へのアニメーションは以下のように設定します。 ul { display: fle