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

Первое, что нам нужно сделать, это установить для 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;
}

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