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

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

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

a:hover {
  color: #000;
}

Далее добавим линию, в роли которой будет выступать нижний бордюр, и скроем её с помощью CSS трансформации. Мы можем сделать это используя CSS псевдо элемент ::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;
}

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

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

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

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);
}

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

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

See the Pen

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

/* CSS анимация линии с левого края */
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;
}

/* CSS анимация линии с правого края */
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 мы научились создавать анимированное подчёркивание ссылки, выезжающее в заданную сторону при наведении курсора мыши на ссылку.