Как анимировать нижнее подчеркивание у ссылки (Text link)

У текстовой ссылки по умолчанию есть подчеркивание, а при наведении курсора оно сразу же пропадает, создавая резкий эффект.

Расскажем, как заменить этот эффект на плавную анимацию при наведении на ссылку. Также покажем, как настроить разные варианты анимации: слева, справа, из центра или снизу вверх.

Для настройки анимации можно использовать несколько разных способов — выбирайте тот, который для вас больше подходит.

Подготовка структуры элементов

Это необходимо сделать при использовании способов 1 и 2, описанных ниже.

Пошаговая инструкция

Создайте контейнер — Div-блок с двумя элементами внутри:

Text Link — текстовая ссылка

Div-блок — полоса-подчеркивание под текстом

Совет: Если вам нужно анимировать несколько ссылок, сразу создайте для элементов классы, чтобы потом легко применять стили к другим ссылкам. Например, для контейнера — link-container, а для блока подчеркивания — link-underline.

2. Настройте стили для ссылки:

Цвет текста: задайте нужный цвет текста

Уберите стандартное подчеркивание: Дополнительный параметры текста («три точки») → Оформление → Нет

3. Настройте стили для контейнера:

Ширина: auto

Авто-лейаут: Отображение — flex, Направление: по вертикали

4. Настройте блок подчеркивания:

Ширина: 100%

Фиксированная высота (толщина линии): например, 2px

Цвет фона: такой же, как у текста ссылки (можно задать другой, если вы хотите, чтобы подчеркивание отличалось по цвету от текста)

Важно: используйте именно Цвет фона (Background Color), а не Фон (Fill), иначе анимация работать не будет.

Готовая структура: контейнер со ссылкой и блоком подчеркивания

Примечание: В редакторе отображение может отличаться от итогового, но в режиме предпросмотра и на опубликованном сайте все работает корректно.

Способ 1: Анимация с помощью состояний элемента

Самый наглядный способ, использующий встроенные состояния «По умолчанию» и «При наведении».

Пошаговая инструкция

Вариант A: Горизонтальное появление (из центра, слева, справа)

Анимация работает за счет плавного изменения ширины подчеркивания от 0% до 100%.

Настройте начальное состояние:

Выберите блок подчеркивания

Установите свойство Ширина: 0%

Добавьте свойство Переход (Transition) — например, 300ms (чтобы сделать анимацию мягкой)

Задайте точку начала анимации:

Выберите контейнер

В настройках Авто-лейаута выберите Выравнивание:

По левому краю — линия появится слева направо

По центру — линия появится из центра в стороны

По правому краю — линия появится справа налево

Настройте состояние при наведении:

Переключитесь на состояние «При наведении» для контейнера

Выберите блок подчеркивания и измените его ширину на 100%

Готово! При наведении курсора подчеркивание плавно появится из заданной точки.

Если вы хотите, чтобы при убирании курсора подчеркивание меняло направление движения, задайте нужное выравнивание (по центру, слева или справа) для состояния «При наведении» у контейнера.

1 пример: выравнивание по умолчанию — по правому краю, при наведении — по левому краю
2 пример: выравнивание по умолчанию — по левому краю, при наведении — по правому краю

Вариант B: Появление снизу вверх

Подчеркивание будет появляться немного ниже текста и плавно двигаться вверх. Эффект работает за счет абсолютного позиционирования и непрозрачности.

Настройте начальное состояние:

Выберите блок подчеркивания

Установите:

Позиционирование: Абсолютное

Смещение снизу: например, -10px

Непрозрачность: 0%

Плавный переход: 300ms

Настройте состояние при наведении:

Переключитесь на состояние «При наведении» для контейнера

Выберите блок подчеркивания и установите:

Смещение снизу: 0px

Непрозрачность: 100%

Готово! Подчеркивание постепенно появляется снизу и двигается вверх.

Способ 2: Анимация с использованием вкладки «Анимации»

Используется анимация «При наведении» с эффектами непрозрачности и движения.

Пошаговая инструкция

Выберите блок подчеркивания

Перейдите на вкладку Анимации на правой панели. Нажмите на «+» и выберите вариант «При наведении».

В настройках анимации выберите Триггерный элемент → Контейнер

Настройте эффекты анимации

Для простого появления подчеркивания — добавьте эффект: Непрозрачность от 0% до 100%, Длительность 0.2s (для плавной анимации)

Для появления снизу вверх — добавьте два эффекта:

Непрозрачность от 0% до 100%

Движение по оси Y от 10px до 0px, Длительность 0.2s

Готово! Анимация добавлена.

Совет: Создав анимацию для одной ссылки, вы можете скопировать ее (меню «три точки» → Копировать) и вставить для блоков подчеркивания других ссылок («+» → Вставить анимацию). Не забудьте при этом изменить триггерный элемент на контейнер текущей ссылки.

Способ 3: Анимация через CSS-код

Этот способ позволяет сделать более простую верстку, без дополнительных оберток, а также стилизовать сразу все ссылки на сайте.

Пошаговая инструкция

Добавьте на страницу виджет Embed.

Вставьте в виджет следующий код:

<style>
  .link-animation {
  position: relative;
  text-decoration: none;
}

.link-animation::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #1474FF;
  transition: width 0.2s ease;
}

.link-animation:hover::after {
  width: 100%;
}
</style>

Настройте код:

link-animation — название класса для ссылки: его можно оставить без изменения или задать любое другое. Если меняете — убедитесь, что новое название одинаково указано во всех частях кода.

Если нужно сделать одинаковое подчеркивание для всех ссылок на странице, то замените в коде «.link-animation» на «a».

background-color — задайте нужный цвет подчеркивания

Добавьте класс link-animation (или тот, который вы использовали в коде) для всех ссылок, которым нужно сделать анимацию подчеркивания.

Готово! Анимация работает для всех ссылок с классом link-animation.

Для всех страниц сайта: Чтобы применить стиль ко всем ссылкам на сайте, вместо Embed нужно вставить код в Настройках проекта → Внутри тега <head>.