Ефект підкреслення тексту при наведенні є популярним прийомом веб-дизайну, який допомагає виділити інтерактивні елементи, такі як посилання. У цьому посібнику ми розглянемо, як створити плавне підкреслення тексту за допомогою CSS.

Нижче наведено CSS-код, який створює ефект підкреслення при наведенні на елемент:

selector::after {
content: ”;
position: relative;
top: 0%;
display: block;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}

selector:hover::after {
width: 100%;
background: #000;
}

У цьому коді використовується псевдоелемент ::after, який додає лінію під текстом Спочатку ширина лінії дорівнює нулю, і вона стає видимою лише при наведенні курсору на елемент.

Як це працює

Селектор hover: Коли курсор наводиться на елемент, ширина лінії збільшується до 100% і колір фону встановлюється в чорний.

Псевдоелемент ::after: Цей елемент створюється після вмісту вибраного елемента і використовується для відображення лінії підкреслення.

Властивість transition: Воно дозволяє анімувати зміни ширини та кольору фону лінії, що створює плавний ефект.

Висновок

Ефект плавного підкреслення тексту не тільки покращує візуальну привабливість вашого сайту, але й робить його більш інтерактивним для користувачів.