Странно, что в такой хорошей подборке не указан простой способ с использованием псевдокласса :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;
}
Комментарии (20)
everythingispossible
19.10.2016 13:51+2Бывает нужно изменить позиционирование линии (сделать выше/ниже) относительно текста.
Aingis
19.10.2016 16:02line-heightменяете и она прекрасно настраивается.everythingispossible
19.10.2016 18:45У меня не получилось сделать это с помощью line-height.
Подскажите на этом примере:
Какое значение и где задать line-height, чтобы вторая ссылка стала выглядеть, как первая?
muxa_ru
19.10.2016 14:31Визуальной разницы в примерах не вижу.
Это так и должно быть?everythingispossible
19.10.2016 14:48Да, так и должно быть.
Значение отступа bottom для обычной ссылки и интерфейсной ссылки-кнопки (текст в элементе span) должны немного различаться, чтобы расстояние между линией и текстом было одинаковым.
Решил это указать явно, чтобы немного сэкономить время тем, кто начнет применять такое подчеркивание.
alexkunin
19.10.2016 17:31+2Минусы:
Так это ж и есть та единственная киллер-антифича, которая все плюсы перечеркивает. Очень редко можно быть на 100% уверенным, что текст ссылки не будет разбит из-за переноса. Случайное или намеренное увеличение контента средствами браузера, или размер окна слишком маленький, или локализация («save as» vs «сохранить как» — почти в 2 раза длиннее) — и все, получаем какой-то визуальный шум. А если паранойя придавит, то еще и неподгрузившиеся стили будут вам портить жизнь.
— Не подходит для подчеркивания многострочного текста;
Но как еще один способ с оговорками — имеет право на жизнь, конечно же. Забрал в копилку, спасибо.EvilPartisan
19.10.2016 22:45Прием оформления используется тысячу лет, а какого нибудь «text-decoration: dashed-underline» до сих пор не придумали.
alexkunin
19.10.2016 23:58Согласен. Было бы прикольно, если бы полностью всю маханику border перенесли на подчеркивание. Правда, наверняка это не делается потому, что подчеркивание рендерится как фича шрифта (шрифтозависимая фича, так сказать).
Weks
20.10.2016 09:56Существует свойство text-decoration-style, однако, увы, оно очень плохо поддерживается (caniuse).
everythingispossible
20.10.2016 10:52Самое неприятное даже не то, что text-decoration-style еще не вышел за рамки экспериментального функционала основных браузеров (и то не всех).
Самое неприятное, что свойство позиционирования линии до сих пор нет даже в экспериментальном функционале основных браузеров. А это значит, что увидим мы это еще не скоро.
Без такого свойства смысл text-decoration-style во многом теряется.
Линия dashed на таком же расстоянии от текста, что и линия solid, смотрится уродливо:
everythingispossible
20.10.2016 11:06Этот способ я использую только для оформления интерфейсных кнопок-ссылок (не знаю, как это правильно называется). Текст в таких кнопках обычно короткий и тестирование на мобильных устройствах показывает, что все в порядке.
Чтобы быть уверенным, что часть текста не перенесется на новую строку при изменении масштаба — можно использовать неразрывный пробел  :
<span class='show-on-map-link'>Показать на карте</span>alexkunin
20.10.2016 13:51А лучше «white-space: nowrap» добавить прямо в класс ссылки — и нет мусора в хтмл (который еще нагенерить нужно, если текст приходит из конфига, базы или библиотеки локализации).
Кстати, еще: ваш сайт может быть кем-то переведен каким-нибудь гуглом, и тогда никаких гарантий на длину текста в этих кнопках.
netgoblin
20.10.2016 00:19Используйте в качестве цвета для псевдоэлементов значение currentColor и будет вам счастье =)
M-A-XG
А зачем :after?
Можно просто использовать
border-bottom: 1px dashed;
artemt
Можно трансформации какие-нибудь накрутить при наведении, например