Hover underline animation
CSS, Animation · Oct 11, 2021
Creates an animated underline effect when the user hovers over the text.
- Use
display: inline-blockto make the underline span just the width of the text content. - Use the
::afterpseudo-element withwidth: 100%andposition: absoluteto place it below the content. - Use
transform: scaleX(0)to initially hide the pseudo-element. - Use the
:hoverpseudo-class selector to applytransform: scaleX(1)and display the pseudo-element on hover. - Animate
transformusingtransform-origin: leftand an appropriatetransition. - Remove the
transform-originproperty to make the transform originate from the center of the element.
Preview
Hover this text to see the effect!
<p class="hover-underline-animation">Hover this text to see the effect!</p>.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
