Подчеркивание ссылок при наведении

Удаляем стандартное подчеркивание

У ссылок есть стандартное подчеркивание, которое нельзя красиво анимировать, чтобы его отключить необходимо воспользоваться свойством text-decoration.

text-decoration: none

Создаем свое подчеркивание

Для создания собственного подчеркивание используем псевдоэлемент и расположим его абсолютно относительно ссылки. Сделаем ему ширину 100%, высоту 1px, добавим цвет на фон и расположим снизу ссылки.

<a href="#" class="link">Текст ссылки</a>

.link {
  position: relative;
}
.link::after {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 1px;
  background: #000;
}

Анимируем подчеркивание ссылки

Чтобы анимировать наше подчеркивание, изменим его ширину на 0 и при наведении на ссылку будем увеличивать его до 100%. Плавность анимации делаем с помощью свойства transition.

.link::after {
  width: 0;
  transition: 0.3s;
}
.link:hover:after {
  width: 100%;
}

Анимация подчеркивания от центра

У нас получилась анимация подчеркивания слева направо. Чтобы сделать анимацию от центра в стороны, необходимо начальное положение псевдоэлемента сделать по центру.

.link::after {
  left: 50%;
  transform: translateX(-50%);
}

Вот примеры различных анимаций подчеркивания:

Подчеркивание многострочной ссылки

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

Для обхода данной проблемы мы воспользуемся свойстовом background и линейным градиентом.

.link {
    color: #000;
    text-decoration: none;
    background: linear-gradient(black, black) no-repeat;
    background-size: 100% 1px;
    background-position: 0 1em;
}

Фоны идеально обтекают текст, даже когда он переносится на новую строку, а благодаря свойствам, таким как background-size и background-position, мы можем с высокой точностью контролировать их вид и поведение.

Для анимации данного способа необходимо при ховере менять background-size:

.link {
  background-size: 0 1px;
  transition: 0.3s;
}
.link:hover {
  background-size: 100% 1px;
}

С помощью данного способа, подчеркивание можно сделать любой формы, на что хватит фантазии и умения работать с градиентами.

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