How to create a multi-line, underline fill effect in CSS.

You can create interesting effects by animating the background-position property and setting the background-size as a multiple of the element it is applied to (e.g., 200%).

One example is creating a starting underline element and then 'filling' it with a new color.

In CSS, you'll need to:

1. Set a linear gradient using the background-image property
2. Set a background size with a 200% width and a height equal to the desired underline height
3. Set background-repeat equal to no-repeat, otherwise it wouldn't ne possible to 'limit' the background height
4. Animate the background-position property 

.anim-underline-fx {
  background-image: linear-gradient(to right, darkblue 50%, lightsteelblue 50%);
  background-size: 200% 3px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  transition: background-position .3s;
}

.anim-underline-fx:hover {
  background-position: 0% 100%;
}

What's great about this effect is that it works with multiple lines of text. 👌

Live demo: