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

🗓️ Обновлено: 16.11.2020
💬Комментариев: 0
👁️Просмотров: 1331

В это статья я расскажу, как можно сделать плавное подчеркивание ссылки на ховере. Все будет реализовано на 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). Пробуйте!

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

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

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Вступай в клуб
🧑‍💻Присоединяйся к сообществу!
Patreon
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
Где учиться
🧑‍🎓Рекомендуемые курсы
Javascript-разработчик
Введение в программирование
SEO-специалист
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Цвет 2022 года
Институт цвета Pantone объявил цвет 2022 года. Это сиреневый оттенок под названием 17-3938 Very Peri.
#6667ab