Эффект плавного подчеркивания ссылок при наведении

В данной практической статье сделаем интересный эффект плавного подчеркивания ссылок при наведении

Структура примера

Создадим простейшую структуру для примера

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Underline</title>
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css"/>
    <link rel="preconnect" href="https://fonts.gstatic.com"/>
    <link href="https://fonts.googleapis.com/css2?family=Lora:wght@700&amp;family=Roboto:wght@300;400&amp;display=swap" rel="stylesheet"/>
    <link rel="stylesheet" href="css/main.css"/>
  </head>
  <body>
    <div class="wrapper">
      <a class="underline underline_a" href="">Underline A</a>
      <a class="underline underline_b" href="">Underline B</a>
      <a class="underline underline_c" href="">Underline C</a>
    </div>
  </body>
</html>

CSS стили

В данном примере .wrapper будет на всю ширину и высоту браузера. Внутри размещаем дочерние ссылки по центру

Размер шрифта назначаем относительно ширины браузера - font-size: 6vw;

Полосу подчёркивания делаем через псевдоэлемент :after

Изначально :after скрыт - width: 0%; opacity: 0;

При наведении на ссылку :after отображаем - width: 100%; opacity: 1;

Чтобы полоса подчеркивания появлялась с одной стороны, а уходила в другую, при наведении необходимо изменить позиционирование :after, если изначально было left: 0;, то при наведении на ссылку сбрасываем left: auto и назначаем right: 0;

Подробнее в комментариях к стилям

body {
  font-family: 'Roboto', sans-serif;
  background: #23202a;
  position: relative;
}
.wrapper {
  min-height: 100vh; /* растягиваем по высоте браузера */
  width: 100%; /* растягиваем по ширине браузера */
  display: grid; /* для центрирования дочерних ссылок */
  place-items: center; /* центрируем дочерние ссылки */
}
a.underline {
  font-size: 6vw; /* размер шрифта относительно ширины браузера */
  text-decoration: none;
  font-weight: bold;
  font-family: 'Lora', serif;
  color: #e76f51;
  position: relative;
  transition: color 0.8s, text-shadow 0.8s; /* для плавного изменения цвета и тени(свечения) ссылки */
}
a.underline:after {
  content: '';
  display: block;
  position: absolute; /* позиционируем относительно ссылки */
  bottom: 15%;
  background: #2a9d8f;
  height: 20%; /* высота относительно высоты ссылки */
  width: 0%; /* изначально ширина полосы подчеркивания равна 0% */
  z-index: -1; /* ставим полосу подчеркивания позади текста ссылки */
  transition: width 0.8s, opacity 0.8s, box-shadow 0.8s; /* для плавного изменения ширины, прозрачности, тени(свечения) */
  border-radius: 100px;
  opacity: 0; /* изначально полоса полностью прозрачна */
  box-shadow: 0 0 16px rgba(42,157,143,0);
}
a.underline:hover {
  color: #f4a261;
  text-shadow: 0 0 16px rgba(244,162,97,0.64);
}

/* При наведении на ссылку, псевдоэлемент :after становится непрозрачным и шириной 100% относительно текста ссылки*/
a.underline:hover:after {
  width: 100%;
  opacity: 1;
  box-shadow: 0 0 16px rgba(42,157,143,0.88);
}

/* Underline A */

/* В первом случае :after позиционируем к правому краю текста ссылки */
a.underline_a:after {
  right: 0;
}
/* при наведении позиционируем к левому краю */
a.underline_a:hover:after {
  right: auto;
  left: 0;
}

/* Underline B */

/* В втором случае :after позиционируем к левому краю текста ссылки */
a.underline_b:after {
  left: 0;
}
/* при наведении позиционируем к правому краю */
a.underline_b:hover:after {
  left: auto;
  right: 0;
}

/* Underline C */

/* В третьем случае :after центрируем */
a.underline_c:after {
  left: 0;
  right: 0;
  margin: 0 auto;
}

В результате получаем

Underline A Underline B Underline C

Архив с примером можно скачать по ссылке

Понимая принцип такого эффекта наведения, в дальнейшем, на основе данного примера можно придумывать и применять множество других эффектов

Буду рад, если статья оказалась полезной

Спасибо за ваше внимание и уделённое время!

Поддержать

Выбор диапазона значений на основе плагина noUiSlider

В статье рассмотрим один из вариантов, как сделать выбор диапазона значений, который обычно используется в фильтрах интернет-магазинов

31/10/2021

Создаём графики на основе плагина Chart.js (обновлено 17.08.2021)

В данной статье рассмотрим вариант создания графиков на основе плагина Charts.js

11/08/2021

Постепенное изменение числа до целевого значения

В этой статье разберём частый кейс при вёрстке - постепенное/плавное увеличение числа от некоторого значения до целевого

14/07/2021