A smooth underline hover effect to use!

#webdev #css #tutorial #beginners

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!