Эффект плавного подчеркивания ссылок при наведении
В данной практической статье сделаем интересный эффект плавного подчеркивания ссылок при наведении
Структура примера
Создадим простейшую структуру для примера
<!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&family=Roboto:wght@300;400&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;
}
В результате получаем
Архив с примером можно скачать по ссылке
Понимая принцип такого эффекта наведения, в дальнейшем, на основе данного примера можно придумывать и применять множество других эффектов
Буду рад, если статья оказалась полезной
Спасибо за ваше внимание и уделённое время!