css link underline animation code example
Example 1: add expanding underline on page load css
#sec {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
#sec:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
#sec:hover:after {
width: 100%;
background: blue;
}
Example 2: css + underline + animation
a.middle
{
position: relative;
}
a.middle:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #FFF;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out;
}