1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Create an Animated Underline Effect using CSS Transition and CSS Background Position

    cssCSS

    In this lesson, we cover how to replace the default text-decoration for links with an animated underline.

    We use multiple background images with a fixed height to create an underline effect. And then using CSS transition we can make one background image travel across the other.

    To make it maintainable, we use CSS variables.