Как создавать анимацию подчеркивания ссылок в современных браузерах?

Для создания анимации подчёркивания ссылок в современных браузерах можно использовать CSS. habr.com www.dev-notes.ru

Один из способов — создание собственного подчёркивания с помощью псевдоэлемента, который располагают абсолютно относительно ссылки. html-css.blog Псевдоэлементу придают ширину 100%, высоту 1px, добавляют цвет на фон и располагают снизу ссылки. html-css.blog

Чтобы анимировать подчёркивание, ширину псевдоэлемента устанавливают в 0, а при наведении на ссылку увеличивают до 100%. html-css.blog Плавность анимации обеспечивают с помощью свойства transition. html-css.blog

Изменить направление анимации можно, настроив CSS-свойство transform-origin. www.dev-notes.ru Оно представляет собой исходную точку трансформации элемента. www.dev-notes.ru По умолчанию она установлена на середину объекта, поэтому масштаб элемента изменяется от центральной точки. www.dev-notes.ru Чтобы анимация началась слева, можно установить исходную точку в крайнее левое положение (transform-origin: top left), а для анимации справа — в крайнее правое положение (transform-origin: top right). www.dev-notes.ru

Ещё один способ — использование линейных градиентов вместе с background-size и background-position. webformyself.com Этот подход подходит для анимации подчёркивания в многострочном тексте. webformyself.com Однако у него есть ограничения: требуется, чтобы текст был встроенным элементом. webformyself.com