HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>menu</title>
<link rel="stylesheet" type="text/css" href="menu15.css">
</head>
<body>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">services</a></li>
<li><a href="#">team</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</ul>
</body>
</html>
CSS CODE:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #ffff56;
}
ul{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
ul li a{
position: relative;
display: block;
padding: 10px 15px;
text-align: center;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
color: #262626;
transition: .5s;
}
ul li a:before{
content: "";
position: absolute;
top: 0;
left: 0%;
width: 100%;
height: 2px;
background: #262626;
transform: scaleX(0);
z-index: -1;
transform-origin: right;
transition: transform .5s;
}
ul li a:hover:before{
transform: scaleX(1);
transform-origin: left
}
ul li a:after{
content: "";
position: absolute;
bottom: 0;
right: 0%;
width: 100%;
height: 2px;
background: #262626;
transform: scaleX(0);
z-index: -1;
transform-origin: left;
transition: transform .5s;
}
ul li a:hover:after{
transform: scaleX(1);
transform-origin: right
}
TrueCodes 
Leave a comment