Классический эффект: при наведении на ссылку или текст появляется анимированное подчеркивание. Вместо обычного text-decoration: underline, подчеркивание создаётся с помощью псевдоэлементов (::after или ::before) и плавно анимируется. Это выглядит современно и добавляет интерфейсу аккуратной динамики.
Это статья из цикла заметок по CSS анимации и эффектам.
Пример, того как это выглядит (наведите курсор на текст):
Вот пример на чистом CSS / HTML
|
1 |
<a href="#" class="underline-animation">Наведи на меня</a> |
Стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.underline-animation { position: relative; display: inline-block; color: #333; text-decoration: none; } .underline-animation::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: #ff6600; transition: width 0.3s ease; } .underline-animation:hover::after { width: 100%; } |
Как это работает:
- Элемент (
a) становится относительно позиционированным (position: relative), чтобы псевдоэлемент::afterмог располагаться относительно него. ::after— это маленькая линия снизу. Изначально её ширина0.- При наведении ширина плавно увеличивается до
100%, создавая эффект «вырастающего» подчеркивания.
Вариации:
- Сделать подчеркивание начинаться не слева, а из центра (анимация ширины + смещение
transform). - Использовать анимацию цвета линии вместе с появлением.
- Добавить небольшую задержку через
transition-delayдля особого стиля.