mouse over effect for link in css code example
Example 1: on hover css
/* Changes an element's color on hover */
.selector {
background-color: black;
}
.selector:hover {
background-color: blue;
}
Example 2: 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 */