1×
Become a member
to unlock all features

Create egghead account to access 5000+ tutorials and resources from expert developers.

Create account
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.