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

Классический эффект: при наведении на ссылку или текст появляется анимированное подчеркивание. Вместо обычного text-decoration: underline, подчеркивание создаётся с помощью псевдоэлементов (::after или ::before) и плавно анимируется. Это выглядит современно и добавляет интерфейсу аккуратной динамики.

Это статья из цикла заметок по CSS анимации и эффектам.

Пример, того как это выглядит (наведите курсор на текст):

Вот пример на чистом CSS / HTML

Стили:

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

  • Элемент (a) становится относительно позиционированным (position: relative), чтобы псевдоэлемент ::after мог располагаться относительно него.
  • ::after — это маленькая линия снизу. Изначально её ширина 0.
  • При наведении ширина плавно увеличивается до 100%, создавая эффект «вырастающего» подчеркивания.

Вариации:

  • Сделать подчеркивание начинаться не слева, а из центра (анимация ширины + смещение transform).
  • Использовать анимацию цвета линии вместе с появлением.
  • Добавить небольшую задержку через transition-delay для особого стиля.

Мало букафф? Читайте есчо !

Анимация "Прыгающий элемент" (bounce)

Апрель 24, 2025 г.

Эффект подпрыгивания делает элемент визуально более "живым" и может привлечь внимание пользователя, особенно если использовать его на кнопке, иконке или уведомлении. Это статья из цикла заметок по CSS анимации и эффектам. Как работает bounce ...

Читать

Плавное появление текста по буквам

Апрель 20, 2025 г.

Здесь мы разберем CSS анимацию - печатание слов по буквам. Это статья из цикла заметок по CSS анимации и эффектам. Это эффект, при котором текст появляется не весь сразу, а по одной букве, создавая ощущение "печати" или "набора текста". ...

Читать

Слайд-ин: элемент "въезжает" с края

Апрель 29, 2025 г.

Этот эффект часто используют для появления блоков на странице при загрузке или при прокрутке — например, когда карточка товара "въезжает" с левой или правой стороны. Он создаёт ощущение динамики и привлекает внимание. Это статья из цикла заметок по ...

Читать

CSS-анимация: Эффект пульсации

Май 1, 2025 г.

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

Читать
 

Комментарии к «Анимация подчеркивания текста при наведении»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: