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 Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (1)

Collapse
 
blessing0024 profile image
onome blessing • Edited

You just made me love another hover effect. Thank you

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more