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

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

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

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

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

Стили:

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

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

Вариации:

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

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

Анимация свечения (мерцание)

Апрель 18, 2025 г.

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

Читать

Плавное появление элемента при загрузке

Апрель 21, 2025 г.

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

Читать

Анимация: Изменение цвета текста при наведении

Май 2, 2025 г.

Когда пользователь наводит курсор на текст (например, ссылку, заголовок или кнопку), его цвет плавно меняется. Это один из самых простых, но эффективных способов добавить интерактивности и визуальной обратной связи на сайт. Это статья из цикла заметок ...

Читать

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

Апрель 29, 2025 г.

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

Читать
 

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

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



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