В недавнем дайджесте со свежими материалами из мира фронтенда увидел подборку способов подчеркивания в CSS.
Странно, что в такой хорошей подборке не указан простой способ с использованием псевдокласса :after.
Плюсы такого способа:
+ Простота использования;
+ Широкие возможности по настройкам (позиционирование, стиль, толщина, цвет линии);
+ Работает на любом фоне;
+ Не зависит от изменения масштаба (если текст при этом остается однострочным)
Минусы:
— Не подходит для подчеркивания многострочного текста;
Возможно есть еще какие-то минусы. Буду благодарен за подсказки.
Странно, что в такой хорошей подборке не указан простой способ с использованием псевдокласса :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;
}