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

[M-A-XG]

А зачем :after?
Можно просто использовать
border-bottom: 1px dashed;

[artemt]

Можно трансформации какие-нибудь накрутить при наведении, например

[everythingIsPossible]

Бывает нужно изменить позиционирование линии (сделать выше/ниже) относительно текста.

[lifecom]

padding-bottom не?

[everythingIsPossible]

не

[everythingIsPossible]

У меня не получилось сделать это с помощью line-height.

Подскажите на этом примере:
Какое значение и где задать line-height, чтобы вторая ссылка стала выглядеть, как первая?

[dom1n1k]

line-height нельзя просто так произвольно менять ради подчеркивания

[Riateche]

Можно просто bottom менять: https://jsfiddle.net/qw5h82qp/7/

[muxa_ru]

Визуальной разницы в примерах не вижу.

Это так и должно быть?

[everythingIsPossible]

Да, так и должно быть.

Значение отступа bottom для обычной ссылки и интерфейсной ссылки-кнопки (текст в элементе span) должны немного различаться, чтобы расстояние между линией и текстом было одинаковым.

Решил это указать явно, чтобы немного сэкономить время тем, кто начнет применять такое подчеркивание.

[EvilPartisan]

Прием оформления используется тысячу лет, а какого нибудь «text-decoration: dashed-underline» до сих пор не придумали.

[Weks]

Существует свойство text-decoration-style, однако, увы, оно очень плохо поддерживается (caniuse).

[everythingIsPossible]

Самое неприятное даже не то, что text-decoration-style еще не вышел за рамки экспериментального функционала основных браузеров (и то не всех).

Самое неприятное, что свойство позиционирования линии до сих пор нет даже в экспериментальном функционале основных браузеров. А это значит, что увидим мы это еще не скоро.
Без такого свойства смысл text-decoration-style во многом теряется.

Линия dashed на таком же расстоянии от текста, что и линия solid, смотрится уродливо:

[everythingIsPossible]

Этот способ я использую только для оформления интерфейсных кнопок-ссылок (не знаю, как это правильно называется). Текст в таких кнопках обычно короткий и тестирование на мобильных устройствах показывает, что все в порядке.

Чтобы быть уверенным, что часть текста не перенесется на новую строку при изменении масштаба — можно использовать неразрывный пробел &nbsp:

<span class='show-on-map-link'>Показать&nbspна&nbspкарте</span>

[everythingIsPossible]

С nowrap отличная идея, спасибо.

[netgoblin]

Используйте в качестве цвета для псевдоэлементов значение currentColor и будет вам счастье =)