CSSのborder-bottomのhoverアニメーション
2021年7月2日今回は、navのメニューに、マウスがhoverした際のアニメーションの記述方法を紹介します。
以下動画です。
<!DOCTYPE html>
<html lang=”ja”>
<meta charset=utf-8>
<body>
<style>
nav ul{ list-style:none; margin:0 padding:0; display:flex; justify-content:center; }
nav ul li a{display:block; width:70px; text-decoration:none; text-align:center; color:#000;}
nav ul li a:after{transition:all 0.3s ease-out; display:block; content:””; border-bottom:2px solid; width:0;}
nav ul li a:hover:after{ width:100%; }
</style>
<nav>
<ul>
<li><a href=”#”>MENU</a></li>
<li><a href=”#”>MENU</a></li>
<li><a href=”#”>MENU</a></li>
<li><a href=”#”>MENU</a></li>
</ul>
</nav>
</body>
</html>