Как сделать линию прерывающуюся буквами (на CSS)?

Question

[Алексей Смирнов]

Обратите внимание на следующее изображение:



В данном случае, нижняя линия прерывается нижними элементами букв "р", "д", "у".
Как, при помощи CSS (если только на CSS это не сделать, то можно JS или JQ), нарисовать такую линию?

P.S. В интернете я находил вот такие способы рисования линий у текста:
1) Как сделать линии до и после текста в html css (картинка прилагается)?
2) stackoverflow.com/questions/2812770/add-centered-t...
Но там нету примеров прерывающихся, нижними элементами букв, линий.

Answer 1

[zooks]

Добавить белую обводку к данным буквам через свойство text-shadow. codepen.io/zooks/pen/emqppK

Comments

[Алексей Смирнов]

Нравиться мне твой вариант (за счет отсутствия JS), но что-то он как-то не так у меня работает.

[zooks]

Алексей Смирнов: смотри код по ссылке.

[Алексей Смирнов]

zooks: Спасибо

[Евгений Петров]

Гуглить немодно https://www.google.ru/search?q=обводка+текста+css

[Алексей Смирнов]

Евгений Петров: Спасибо, это еще одна хорошая идея.

[Serj-One]

zooks: Зачем извращение с оборачиванием в span букв по отдельностью? Не проще задать обводку для всего текста?

[zooks]

Serj-One: ну так дерзай - покажи решение, отличное от моего, но не только отсутствием span-ов.

[Serj-One]

zooks: А зачем " отличное не только отсутствием span'ов". Решение отличное, сам сделал бы так же. За исключением бредовой идеи оборачивания отдельных букв в span.
codepen.io/anon/pen/KwONWz - твоё решение без извращений.

[zooks]

Serj-One: ну что ж, знаток извращений, теперь открой в Firefox.

[Serj-One]

zooks: И что же не так в FF? Да и каким образом столь простая вещь может в нём не работать?

[zooks]

Serj-One: чужой код с первого раза изменить не в состоянии, зато кричать мы горазды.

[zooks]

Serj-One: придумай и выложи свое решение, слабо? Вопрос будет закрыт. А пока все это похоже на черную зависть и рассматривание соринок в чужом глазу.

[Serj-One]

zooks: >> придумай и выложи свое решение, слабо? Вопрос будет закрыт. " - Вопрос и без того уже закрыт. Зачем изобретать велосипед? Обводка текста + линия, только без маразма с оборачиванием букв в спаны.

[zooks]

Serj-One: ч.т.д.