PcSchool.Club

パソコンを分かりやすく解説することを目指す無料のオンラインパソコン教室

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

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>

関連サイト

パソコン教室

パソコンスクール・テルン岐阜・穂積・大垣教室 楽しく学ぶ・通うパソコン教室あもる

パソコン修理・販売・買取・サポート

パソコンの修理・販売・買取・サポート