Как сделать такой стиль у ссылок не усложняя разметку?

Question

[Sergey750il]

Как сделать такой стиль подчеркивания у ссылок без усложнения разметки? display: inline-block не пройдет, т.к. текст ссылки может быть длинный и возможны переносы, в результате подчеркивание отображается некорректно.

Comments

[arsenty]

Так чем просто a { display: inline; } не устраивает?

Answer 1

[Ankhena]

границей https://jsfiddle.net/at29z0bo/
градиентом https://jsfiddle.net/aoLtkp4z/

Comments

[Sergey750il]

А как можно увеличить частоту полосок и соответственно сделать их короче? Получается только увеличить длину

[Ankhena]

Sergey750il, редактируйте градиент и размер фона, как вам нравится

Answer 2

[Yupiter7575]

border-bottom: 3px black dashed;

Comments

[Sergey750il]

Не работает это. Я же писал, что когда длинный текст с переносом не работает.

[Yupiter7575]

Sergey750il,
text-decoration: underline;
-moz-text-decoration-style: dashed;

[Sergey750il]

Yupiter7575, Тоже не выходит. Линия сильно прижата к тексту(

[Yupiter7575]

Sergey750il, нашел чьи то стили. Но здесь реализовано с помощью scss.