Коротко: плавное подчёркивание при наведении делают двумя способами: меняя background-size у ссылки (линия «выезжает» слева) или анимируя transform: scaleX() у псевдоэлемента ::after. Второй способ гибче: можно задать толщину, отступ и направление роста.
Два способа
| Способ | Особенность |
|---|---|
background-size |
минимум кода, линия по тексту |
::after + scaleX |
полный контроль толщины и положения |
Вкладки: примеры
a.smooth {
text-decoration: none;
background-image: linear-gradient(#003F8F, #003F8F);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 2px; /* линия «нулевой» длины */
transition: background-size .25s ease;
}
a.smooth:hover { background-size: 100% 2px; }Линия — это фон-градиент высотой 2px. Меняется только его длина. Работает даже для переноса строк.
a.line { position: relative; text-decoration: none; }
a.line::after {
content: "";
position: absolute;
left: 0; bottom: -2px;
width: 100%; height: 2px;
background: #003F8F;
transform: scaleX(0);
transform-origin: left;
transition: transform .25s ease;
}
a.line:hover::after { transform: scaleX(1); }scaleX «растягивает» линию от левого края. Анимация на transform — самая плавная и дешёвая для браузера.
a.line--center::after { transform-origin: center; }Поменяв transform-origin, получаете рост линии от центра или от правого края (right). Одно свойство — три разных эффекта.
a.line::after {
height: 1px;
background: currentColor; /* цвет текста */
bottom: -4px; /* отступ от текста */
}currentColor делает линию в цвет текста — тогда эффект работает и для светлых ссылок. Отступ задают через bottom.
width или background-size заставляет браузер пересчитывать раскладку. transform: scaleX() работает на графическом ускорителе — эффект плавнее, особенно на слабых устройствах.Практика: подчёркивание для меню
- Уберите стандартное
text-decoration. - Создайте линию через
::after. - Задайте
scaleX(0)иtransform-origin. - Добавьте
transitionнаtransform. - Покажите линию при
:hoverи:focus-visible. - Проверьте на мобильном (там hover нет — оставьте видимый индикатор).
a.menu-link:hover::after,
a.menu-link:focus-visible::after { transform: scaleX(1); }Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Линия не появляется | нет content: "" |
добавить |
| Линия «дёргается» | анимируется ширина | использовать transform |
| Линия «заезжает» на текст | мало bottom |
сдвинуть ниже |
| На мобильном нет эффекта | hover недоступен | продублировать через :focus-visible |
Проверьте себя
transform?
transform-origin: center?
Вопросы и ответы
Да, но анимировать его сложно (только цвет и толщину). Для «выезжающей» линии используют псевдоэлемент или фон.
Вместо однотонной линии используйте linear-gradient с повторяющимися сегментами — получится пунктир или «зебра».
Да, часто делают у карточек: при наведении на карточку подчёркивание появляется под заголовком. Это заметный и аккуратный приём.
Нет, это только визуальный приём. Но заметные ссылки повышают кликабельность и вовлечённость.
Итоги
- Подчёркивание делают фоном (
background-size) или псевдоэлементом. - Анимируйте
transform: scaleX()— это плавно. transform-originзадаёт направление роста.- Продублируйте эффект для клавиатуры (
:focus-visible).
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.