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

Создаем свое плавное подчеркивание ссылки при наведении, которое смотрится гораздо лучше, чем стандартное подчеркивание ссылок или текста.

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

У ссылок есть стандартное подчеркивание, которое нельзя красиво анимировать, чтобы его отключить необходимо воспользоваться свойством 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; 
}

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