CSS Menu Hover Effect ( Source Code )

CSS Menu Hover Effect ( Source Code )

HTML

<div class="menu-area"> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Services</a></li> <li><a href="">Portfolio</a></li> <li><a href="">Contact</a></li> </ul> </div>


CSS


body { margin: 0; padding: 0; font-family: poppins; background-image: url(https://i.postimg.cc/MZdXj7Qd/1.jpg); background-size: cover; background-position: center center; height: 100vh; } .menu-area ul { padding: 0; display: flex; float: right; } .menu-area ul li { list-style-type: none; padding: 10px 20px; } .menu-area ul li a { text-decoration: none; text-transform: uppercase; font-size: 20px; color: #fff; position: relative; font-weight: bold; } .menu-area ul li a::before { content: ''; width: 0; height: 3px; background: #fff; position: absolute; top: -5px; left: 0; transition: .5s; } .menu-area ul li:hover a:before { width: 50%; transform: translateX(100%); }