Become a member
to unlock all features

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

Create account

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


    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.