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

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