Here's a nice and smooth hover effect that's great for your next website! All you need is positioning, a psuedo element, and two lines of scaling.
- Make your text has a position of relative while your after psuedo element will have a position of absolute. That way you can position your after psuedo element under the text.
h1 {
position: relative;
}
h1::after {
content: ' ';
position: absolute;
/*Positioning the underline*/
left: 0;
top: 40px;
/**/
width: 100%;
height: 3px;
}
2 . Transform your underline to hanve an X scale of 0 with transform: scaleX(0)
and make sure it transforms to the right with transfrom-origin: right
.
h1 {
position: relative;
}
h1::after {
content: ' ';
position: absolute;
left: 0;
top: 40px;
width: 100%;
height: 3px;
/*Transforming*/
transform: scaleX(0);
transition: transform 0.2s;
transform-origin: right;
}
3 . Give your text a hover effect where the underline transforms to the left back at full X scale!
h1:hover::after {
transform-origin: left;
transform: scaleX(1);
}
Now give a transition, a border-radius, and a color of your choosing, and there's your underline animation! If you want an example of how this can be used here's a react web app i'm making with it. Hover on the nav bar text elements to see it in action!
Top comments (1)
You just made me love another hover effect. Thank you