Генератор анимированного подчёркивания для ссылок (CSS)
Выберите эффект и наведите мышь (или нажмите Tab) на ссылки в предпросмотре. Код использует background-size, который работает и в многострочных ссылках.
Как пользоватьсяСсылки с движущимся подчёркиванием
В этом абзаце есть короткая ссылка а также намного более длинная ссылка, которая на телефоне может разбиться на две строки чтобы проверить эффект.
Доступно на: 
Генератор анимированного подчёркивания для ссылок (CSS): для чего нужен
Подчёркивание, анимированное при наведении мыши, придаёт завершённость ссылкам в меню и текстах. Если сделать его через ::after, оно работает только в однострочных ссылках; этот генератор рисует линию через background-image и анимирует background-size, что работает, даже когда ссылка переносится.
Выберите один из пяти эффектов (растёт слева, из центра, скользит, маркер и волнистое), цвет, толщину и длительность. Тонкая линия по умолчанию всегда видна, чтобы ссылка отличалась от текста, как требует WCAG 1.4.1, а эффект появляется и при фокусе с клавиатуры.
Как пользоваться
- Выберите эффект.
- Настройте цвет, толщину и длительность.
- Скопируйте CSS и примените класс к ссылкам.
Когда использовать
- Навигационные меню.
- Ссылки внутри статей.
- Подвалы и списки ссылок.
Частые вопросы
Почему background, а не ::after?
С псевдоэлементом ::after линия работает только в однострочных ссылках. Если рисовать подчёркивание через background-image и анимировать background-size, линия следует за текстом, даже когда ссылка переносится на две строки.
Остаётся ли ссылка похожей на ссылку?
Внутри абзаца ссылка должна отличаться от текста и без наведения мыши (WCAG 1.4.1). Поэтому опция тонкой постоянно видимой линии включена по умолчанию; эффект анимируется поверх неё.
А на телефоне?
На телефоне нет наведения; эффект появляется при фокусе и касании. Видимая базовая линия гарантирует, что ссылки узнаются.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.