<ul id="menu">
<ul>
<center>
<li><a href="#">Home</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Concact</a></li>
<li><a href="#">Buy</a></li>
</center>
</ul>
</ul>
body{
margin: 0;
padding: 0;
background: #f1f1f1;
}
#menu{
margin: 0;
padding: 0;
margin-top: 100px;
}
#menu li{
list-style: none;
display: inline-block;
}
#menu li a{
text-decoration: none;
position: relative;
color: #313131;
font-size: 50px;
font-weight: 700;
font-family: sans-serif;
display: block;
overflow: hidden;
transition: 0.7s all;
padding: 14px 0px;
margin: 0px 30px;
text-transform: uppercase;
}
#menu li a:before{
content: '';
width: 60px;
position: absolute;
border-bottom: 8px solid #313131;
bottom: 0;
right: 350px;
transition: 0.7s all;
}
#menu li a:hover:before{
right: 0;
}
/*
* https://www.darkcode.info/2017/09/cool-menu-hover-effects-using-html-and.html
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.