DEV Community

Lens
Lens

Posted on

4

A smooth underline hover effect to use!

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.

  1. 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;
}
Enter fullscreen mode Exit fullscreen mode



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;
}
Enter fullscreen mode Exit fullscreen mode



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);
}
Enter fullscreen mode Exit fullscreen mode



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!

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (1)

Collapse
 
blessing0024 profile image
onome blessing • Edited

You just made me love another hover effect. Thank you

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay