Простий спосіб оформлення підкреслення у однорядкових посилань

В недавньому дайджесті зі свіжими матеріалами зі світу фронтенда побачив добірку способів підкреслення CSS.

Дивно, що в такій хорошій збірці не вказано простий спосіб з використанням псевдокласу :after.



Плюси такого способу:
+ Простота використання;
+ Широкі можливості по налаштувань (позиціонування, стиль, товщина, колір лінії);
+ Працює на будь-якому тлі;
+ Не залежить від зміни масштабу (якщо текст при цьому залишається однострочным)

Мінуси:
— Не підходить для підкреслення багаторядкового тексту;

Можливо є ще якісь мінуси. Буду вдячний за підказки.

<span class='inline-block decorated-link'>Посилання в спане {display: inline-block;} </span>
<br>
<br>
<a href='#' class='decorated-link'>Звичайна посилання</a>


.decorated-link {
color: #337ab7;
position: relative;
text-decoration: none;
cursor: pointer;
}

.decorated-link:hover {
text-decoration: none;
color: red;
}

.decorated-link:after {
content: ";
position: absolute;
right: 0;
left: 0;
bottom: 1px;
width: 100%;
border-bottom: thin dashed rgba(51, 122, 181, 0.4);
}

.decorated-link:hover:after {
border-color: rgba(255, 0, 0, 0.3);;
}

a.decorated-link:after {
bottom: 0;
}

.inline-block {
display: inline-block;
}

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.