CSS-приём — анимированная заливка текста!

В этом мини-трюке создадим эффект появления строки, когда цветной слой постепенно «проходит» по тексту и заполняет его, будто это анимация набора.

Как работает:

• data-text хранит копию строки, которую использует псевдо-элемент для заливки;

• ::before накладывается поверх и начинается с ширины 0, скрывая часть текста;

• Анимация плавно увеличивает width, открывая символы один за другим;

• border-right добавляет небольшой “курсор”, усиливая ощущение движения.

Трюк отлично показывает силу псевдо-элементов: один дублирует контент, второй управляет визуальным сценарием!

Code Ready | #фишка