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.