Плавне підкреслення посилання при наведенні на чистому 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). Пробуйте!
У нас на каналі є відео з цієї теми, радимо подивитися, якщо залишилися питання.
Не работает, тег 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;
}
vse, razobrlaysa tam ne bilo : v width v konce