hoverアニメーション

昨夜のM1はすばらしかった！！！
ミルクボーイおめでとう！コンフレークを見るたびに思い出しそう。
とてつもない倍率の中で戦っている姿を見てると、わたしも負けてられない。頑張ろう。
個人的に「すゑひろがりず」のネタがツボでした。言葉選びのセンスが抜群！これから、ブラックサンダーは漆黒の雷と呼びます笑。

語りだせばきりがないので、この辺で。。
課題をやっていてつまずいたhoverアニメーションをアウトプットします。

hoverするとニュンと線が伸びるアニメーションです。言葉で伝えるのが難しい。動画があれば一発で伝わるのでしょうが。。。

やり方
width０の疑似要素を、hoverしてwidthを100％にする。これで伸びるようなアニメーションをつける。

HTML

      <nav class="header_nav">
       <ul>
         <li><a href="">HOME</a></li>
         <li><a href="">WORKS</a></li>
         <li><a href="">CONTACT</a></li>
       </ul>
     </nav>

CSS

まず、aのリンクタグの初期設定(text-decoration)をなしにして、文字の色を黒にします。

.header_nav a {
 color: #333;
 text-decoration: none;
 font-size: 18px;
}

それから疑似要素で文字の下に起点を作ります

.header_nav a::after {
   content: '';　　
   display: block;
   width: 0;　　この値をhover時に100%とする。
   height: 2px;
   background: #333;
   transition: 0.3s;
}

hoverしたときにwidthを100％にすることで、線が伸びるようなアニメーションへ

.header_nav a:hover::after{
   width: 100%;　　
}

ナビとかでよく見るアニメーションなので、次やるときは何も見ないできるようにしたいです。忘れたらこのnoteを参照しよう。
疑似要素にhoverかけれるのを知らなかったので、勉強になります。

このサイトを見た方が分かりやすいです。
参照サイト↓
https://diwao.com/2017/06/css-hover-underline-animation.html