css a href hover effect code example
Example: css a href hover effect
/* css code */
body{
background-color: #000;
}
.container{
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
}
li{
list-style: none;
display: inline-block;
}
a{
text-decoration: none;
color:#fff;
font-size: 24px;
padding: 0 20px;
display: inline-block;
}
.link::after{
content: '';
display: block;
width: 0;
height: 2px;
transition: width .3s;
background-color: #fff;
}
.link:hover::after{
width: 100%;
transition: width .3s;
}
/* html code */
<div class="container">
<li><a href="#" class="link">Home</a></li>
<li><a href="#" class="link">About Us</a></li>
<li><a href="#" class="link">Services</a></li>
<li><a href="#" class="link">Gallery</a></li>
<li><a href="#" class="link">Contact</a></li>
</div>