Эффект заливки подчеркивания

Как создать эффект многострочной заливки с подчеркиванием в CSS.

Вы можете создавать интересные эффекты, анимируя свойство background-position и устанавливая размер фона как кратное элементу, к которому он применяется (например, 200%).

Одним из примеров является создание начального элемента подчеркивания и затем его «заливка» новым цветом.

В CSS вам необходимо:

1. Установите линейный градиент с помощью свойства background-image.
2. Установите размер фона с шириной 200% и высотой, равной желаемой высоте подчеркивания.
3. Установите background-repeat равным no-repeat, иначе невозможно было бы «ограничить» высоту фона.
4. Анимируйте свойство background-position.

CSS:

.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%;
}

Что хорошего в этом эффекте, так это то, что он работает с несколькими строками текста. 👌

Демо

Вот живая демонстрация:

---

Автор Себастьяно Герриеро