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

🗓️ Обновлено: 08.08.2022
💬Комментариев: 2
👁️Просмотров: 10723

В это статье я расскажу, как можно сделать плавное подчеркивание ссылки на ховере. Все будет реализовано на css, без использования сторонних библиотек.

Предположим, у вас есть ссылка:

<a href="#">Как сделать плавное подчеркивание</a>

По умолчанию, это обычная ссылка, стили для которой задает браузер. Давайте это исправим.

Наш план заключается в том, что с помощью псевдоэлемента :before мы создадим линию, которая будет располагаться чуть ниже ссылки. И этой линией мы и будем в дальнейшем управлять.

Добавим вот такие стили:

a {
	position: relative;
	color: #484848;
	font-size: 1.25rem;
	text-decoration: none;
}
a::before {
	content: '';
	position: absolute;
	left: 0; bottom: -5px;
	width: 100%;
	height: 1.5px;
	background-color: red;
}

У вас должна была появиться красная линия под ссылкой. Это и есть наш псевдоэлемент before.

Изменим ширину этой линии. Вместо 100% зададим 0 — то есть, ее теперь не будет видно.

А затем, когда пользователь будет наводить курсор на ссылку, мы будем менять свойство width у нашего псевдоэлемента. Давайте, пропишем это:

a:hover:before {
	width: 100%;
}

Итак, при наведении на ссылку появляется наша линия. Давайте зададим плавность — укажем какое свойство мы будем менять и пропишем время перехода.

a::before {
	transition: width 0.35s;
}

Здесь мы указали, что переход состояния width с нуля до 100% будет длиться 0.35 секунд.

Итак, итоговый код выглядит следующим образом:

ДЕМО

Я показал принцип, по которому можно создавать плавное подчеркивание. Вы можете экспериментировать и менять значения. Или менять свойства. Например, вместо того, чтобы менять width с нуля до 100% поставьте значение width: 100%, но задайте, например, transform: scaleX(0), а при наведении меняйте его на scaleX(1). Пробуйте!

У нас на канале есть видео на эту тему, советуем посмотреть, если остались вопросы.

Статья была полезной?
👍
Да - 26
👎
Нет - 7
💬Комментарии:
Аноним

Не работает, тег hover:before ничего не происходит:
.About {
text-decoration: none !important;
font-size: 30px;
font-family: «Lato»;
color: rgb(57, 57, 57);
font-weight: bold;
line-height: 1.2;
text-align: left;
position: absolute;
left: 830.906px;
top: 52px;
z-index: 8;
}
.About::before {
content: »;
position: absolute;
left: 0; bottom: -5px;
width: 0%;
height: 2.5px;
background-color: #575757;
}
.About:hover:before {
width 100%!important;
}

Anonym

vse, razobrlaysa tam ne bilo : v width v konce

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Просмотров: 56414
Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS
Просмотров: 42572
Появление элементов при скролле
Просмотров: 41858
Как выровнять картинку по центру с помощью CSS
Просмотров: 29199
Как изменить цвет SVG в CSS
Просмотров: 29083
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Viva Magenta
🤔Цвет 2023 года
Исследовательский институт Pantone выбрал главный цвет 2023 года. Им стал карминово-красный оттенок с фиолетовым подтоном, который назвали Viva Magenta.
#bb2649