Анимация подчёркивания ссылок на чистом CSS

Одно из преимуществ создания моего личного сайта ^[1] с нуля вместо использования готовой темы ^[2] заключается в том, что я начинаю с настроек браузера по умолчанию и постепенно добавляю собственные расцветки. Я стараюсь удержать сайт от раздувания, но и персонализация — важное дело. Нужно найти некий компромисс между спартанскими страницами Hacker News ^[3] и Craigslist ^[4] с одной стороны и перегруженностью старого MySpace ^[5] с другой.

Как-то мне попался сайт с причудливыми анимированными подчёркиваниями для ссылок, и я захотел реализовать эффект. Но мне важно использовать чистый CSS, потому что ради таких легкомысленных вещей негоже добавлять JavaScript, который может вызвать проблемы с производительностью или удобством интерфейса (см. угон полосы прокрутки ^[6]).

Вот как сейчас выглядит эффект:

Реализация

Отрисовка линий под текстом — на удивление сложная тема ^[8]. Всё зависимт от того, насколько далеко вы готовы отклониться ^[9] от стандарта и о каких деталях беспокоитесь (например, проход мимо выносных элементов букв ^[10]).

Я исследовал два ^[11] подхода ^[12]. Оба они, по сути, удаляют стандартный text-decoration ^[13] и с помощью псевдоэлементов ^[14] добавляют имитированную границу. Затем эта граница анимируется переходами CSS ^[15]. К сожалению, у этих решений один недостаток: они нормально не работают, если ссылка охватывает более одной строки. Подчёркивание появляется только в первой строке.

В конце концов я нашёл CodePen ^[17] от Shaw ^[18], лишённый этого недостатка, и изменил эффект на свой вкус.

Вот соответствующий код. Поиграться с ним можно на repl.it ^[20].

a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
}

a:hover {
    background-size: 100% 2px;
}

Рассмотрим подробнее это решение.

Во-первых, отключаем стандартное оформление text-decoration.

Нам придётся использовать фоновое изображение, потому что оно способно покрыть несколько строк. Хотя можно взять реальную картинку, но речь идёт всего лишь о линии, поэтому используем линейный градиент ^[21], который сгенерирует нам изображение. Обычно его используют для создания градиента между двумя разными цветами, но нам нужно, чтобы подчёркивание было того же цвета, что и ссылка, поэтому используем currentColor ^[22] как для начала, так и для конца градиента. currentColor указывает браузеру использовать цвет элемента из свойства color ^[23].

Используем background-position ^[24] для размещения изображения в левом нижнем углу. Значение 0% соответствует горизонтальному положению, а 100% — вертикальному.

Отключаем background-repeat ^[25], чтобы предотвратить создание нескольких экземпляров изображения.

С помощью background-size ^[26] указываем нулевую ширину и высоту в два пикселя. Нулевая ширина означает, что подчёркивание появится только при наведении, иначе картинка не видна.

Устанавливаем transition ^[27] по размеру фона, так что любое изменение свойства займет 0.3 секунды.

При наведении на ссылку меняем ширину изображения на 100%, создавая полное подчёркивание, а transition обеспечивает анимацию.

Вот и всё! Я очень доволен лаконичностью кода. Если хотите добавить на свой сайт что-то похожее, не стесняйтесь брать эту реализацию или посмотрите некоторые другие анимированные эффекты подчёркивания ^[28].

Автор: m1rko

Источник ^[29]