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

🗓️ Оновлено: 08.08.2022
💬Коментарів: 2
👁️Переглядів: 15974

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

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

У нас на каналі є відео з цієї теми, радимо подивитися, якщо залишилися питання.

Стаття була корисною?
👍
Так - 32
👎
Ні - 11
💬Коментарі:
Аноним

Не работает, тег 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
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Наш рейтинг
🏆Найкращі біржі посилань
4.8
2
4.0
3.8
4
GoGetLinks
3.5
5
Miralinks
3.5
Наш рейтинг
🏆Найкращий хостинг для сайту
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Перевірка знань
🤔Чи добре ви знаєте CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Peach Fuzz
🤔Колір 2024 року
Дослідницький інститут Pantone обрав головний колір 2024 року. Ним став ніжний бархатистий персиковий відтінок, який отримав назву Peach Fuzz (Персиковий пух).
#febe98