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

Источник: «Animating Link Underlines»
Недавно я добавил в этот блог простой визуальный эффект, который мне быстро понравился: когда вы наводите курсор на ссылку, анимированное подчёркивание ссылки раскрывается из центра. Создать этот эффект на удивление легко и не требует добавления каких-либо дополнительных элементов в DOM HTML.

Первое, что нам нужно сделать, это установить для text-decoration значение none и для position значение relative, что бы мы могли позиционировать нашу линию относительно ссылки. Для простоты мы также позаботимся о том, что бы ссылка не меняла цвет при наведении курсора:

a {
position: relative;
color: #000;
text-decoration: none;
}

a:hover {
color: #000;
}

Далее мы хотим добавить линию, в роли которой будет выступать нижний бордюр, и скрыть её с помощью трансформации. Мы можем сделать это используя псевдо элемент ::before, что бы скрыть ей установив масштаб по оси X равным 0:

a::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
transform: scaleX(0);
transition: transform 0.3s ease;
}

В самом низу, мы говорим элементу анимировать изменения трансформации transform с длительностью в 0.3 секунды. Что бы линия появилась нам нужно просто сделать её видимой, при наведении курсора hover, установив масштаб по оси X равный 1:

a:hover::before {
transform: scaleX(1);
}

При этом мы получаем расширяющееся подчёркивание при наведении курсора:

See the Pen

Вот весь код, что мы написали:

a {
position: relative;
color: #000;
text-decoration: none;
}

a:hover {
color: #000;
}

a::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
transform: scaleX(0);
transition: transform 0.3s ease;
}

a:hover::before {
transform: scaleX(1);
}

Изменение направления анимации линии

Мы можем изменить направление анимации, настроив свойство transform-origin. Оно представляет собой исходную точку трансформации элемент. По умолчанию, оно установлено на средину объекта, поэтому масштаб элемента изменяется от центральной точки элемента. Что бы анимация началась слева, мы можем установить исходную точку в крайнее левое положение (transform-origin: top left), а для анимации справа, мы можем установить начальную точку в крайнее правое положение (transform-origin: top right):

See the Pen

Для изменения направления анимации, объявите transform-origin в псевдо элементе ::before, вот так:

/* Анимация линии с левого края */
a::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
transform: scaleX(0);
transform-origin: top left;
transition: transform 0.3s ease;
}

/* Анимация линии с правого края */
a::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
transform: scaleX(0);
transform-origin: top right;
transition: transform 0.3s ease;
}

Мы научили создавать анимированную лини выезжающую при наведении мыши на ссылку.

Дополнительные материалы

Предыдущая Статья

CSS: Руководство по современным цветам

Следующая Статья

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