Home | Blog | CSS Tricks | Animated Underlines with CSS

I was recently working on a new theme for my website when I decided to explore different possibilities for menu link animations. There are so many great possibilities thanks to CSS animations/transitions.

Creating these effects is very simple since no additional DOM elements have to be added to your HTML markup. And in most cases, for browsers that don’t yet support pseudo elements, they fall back nicely to just a simple underline.

Just note that indeed, not all browsers will support these pseudo elements, as stated above. So do your due diligence with browser testing.

These are just a small sample of what can be done. I’d love to see how you’ve used CSS and pseudo classes to dress up your pages.

See the Pen Animated underlines by Laura Sage (@ThePixelPixie) on CodePen.