PcSchool.Club

パソコンを分かりやすく解説することを目指す無料のスキルアップサイトです

岐阜のパソコン教室「パソコンスクール・テルン」

CSSのborder-bottomのhoverアニメーション

2020年5月17日

今回は、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>