Анимированное подчеркивание при наведении на текст

Небольшой классный трюк в CSS. Добавление анимированного подчеркивания при наведении на текст.

.text {
   background-image:linear-gradient(
     to bottom,
     tranparent 0%,
     transparent 90%,
     hotpink 90%,
     hotpink 100%
   );
background-repeat: no-repeat;
background-size: 0% 100%;
background-position-x: right;
transition: background-size 300ms;
}

.text:hover {
   background-size: 100% 100%;
   background-position-x: left:
}

Здесь на самом деле это не подчеркивание, а фоновое изображение, которое представляет собой линейный градиент сверху вниз. Первые 90% фона просто прозрачные, а нижние 10% — желаемый цвет.

Изначально ширина фона равна 0% и увеличивается до 100% при наведении Мы также меняем положение фона, чтобы при наведении подчеркивание увеличивалось слева, а при снятии наведения выходило справа