Плавне підкреслення посилання при наведенні

41

Плавное подчёркивание ссылки при наведении

Уявляю коротенький фрагмент коду(фрагментом) CSS, для реалізації плавного виділення анкорів посилань з підкресленням.
Навіщо потрібно виділяти посилання загального місива тексту, це і їжаку зрозуміло. Існує велике різноманіття способів і видів оформлення посилань, все обмежується лише фантазією майстра.
За допомогою псевдо-класу :hover і магії CSS3, можна навісити на стандартні, нудно-оформлені синюшні посилання, практично будь ефект.
Сніппет, показаний сьогодні, не видасть щось дивовижне і незвичайне. Все по-простому, без особливих витребеньок, лише виділення посилання кольором і плавне підкреслення при наведенні.

Опишу тільки код CSS, так як на стороні Html змінювати і додавати що-небудь немає необхідності.

CSS

По-перше, з допомогою властивості line-height: встановимо міжрядковий інтервал залежно від базової лінії шрифту, у вас значення може бути іншим. Зробимо посилання блочно-рядкової, вбудованої в структуру тексту, задавши їй властивість display зі значенням inline-block. Позбудемося від стандартного підкреслення прописавши text-decoration:none; і заллємо посилання потрібне нам кольором.

a {
line-height: 1;
display: inline-block;
color:#ffeb3b;
 text-decoration:none;
cursor: pointer;
}

a {
line-height: 1;
display: inline-block;
color:#ffeb3b;
text-decoration:none;
cursor: pointer;
}

Потім використовуємо псевдоэлемент :after, щоб у нас з’явилася можливість додати додатковий елемент, в нашому випадку це лінія, і визначимо простенький ефект переходу властивості transition:. Ширину лінії спочатку виставимо з нульовим значенням width: 0%;, висоту визначимо 2px. Колір лінії може бути будь-яким, у прикладі не став особливо фантазувати і виставив у відповідності кольору тексту посилання.

a:after {
display: block;
content: "";
height: 2px;
width: 0%;
background-color: #ffeb3b;
 transition: width .3s ease-in-out;
}

after a: {
display: block;
content: “”;
height: 2px;
width: 0%;
background-color: #ffeb3b;
transition: width .3s ease-in-out;
}

Залишається справа за малим, додати нашої ссылке трохи движухи. Для цього використовуємо парочку псевдокласів :hover :focus. Перший буде визначає стиль посилання при наведенні, другий спрацює коли на посилання «щільно» курсор встановиться. Тут ми змінимо значення ширини, визначимо його в 100%.
Тепер, при наведенні або фокусі на засланні, стилізована лінія підкреслення явиться погляду користувача, плавно з ледь помітною затримкою, час якої, ми завбачливо визначили раніше властивості transition:.

a:hover:after,
a:focus:after {
width: 100%;
}

a:hover:after,
a:focus:after {
width: 100%;
}

В результаті ми отримуємо наступну картину:

Наведіть курсор на зразок, щоб перевірити.

Весь код в зборі буде виглядати так:

a {
line-height: 1;
display: inline-block;
color:#ffeb3b;
 text-decoration:none;
cursor: pointer;
}
a:after {
display: block;
content: "";
height: 2px;
width: 0%;
background-color: #ffeb3b;
 transition: width .3s ease-in-out;
}
a:hover:after,
a:focus:after {
width: 100%;
}

a {
line-height: 1;
display: inline-block;
color:#ffeb3b;
text-decoration:none;
cursor: pointer;
}
after a: {
display: block;
content: “”;
height: 2px;
width: 0%;
background-color: #ffeb3b;
transition: width .3s ease-in-out;
}
a:hover:after,
a:focus:after {
width: 100%;
}

Звичайно, це всього лише один з самих простеньких і скромних варіантів оформлення посилань. Більше експериментуйте, додавайте фарб, використовуйте анімацію, зрушуйте вправо або вліво, робіть посилання перевертиши наприклад, і т. д і т. п, головне не перестаратися, все повинно бути з почуттям, толком і розстановкою.

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: