Визуализировать пробелы с помощью css

Есть ли способ визуализировать пробелы в тексте, используя только CSS без изменения исходного HTML-кода? Допустим, что HTML:

<div class="paragraph">Lorem ipsum dolor sit amet,<br/>consectetur adipiscing elit.</div><div class="paragraph">In augue ipsum, iaculis vel dapibus ut, viverra ut tellus. In ornare euismod leo a ultrices.</div>

• end end (¶) → может использовать :after
• line break (↵) → может использовать :after
• space (·) → единственный способ, которым я могу думать, - это добавить все пробелы с чем-то вроде <span class='space' /> и использовать :after

Последнее условие не удовлетворяет условию использования только CSS и исходного HTML. Есть ли способ сделать это?

EDIT: в соответствии с запросом, вот CSS для знака пикника после парагара: .paragraph:after { content: "¶"; }

Ответы

Ответ 1

javascript и php, вероятно, проще, но если вы настаиваете на CSS, вы можете использовать собственный веб-шрифт и заменить символ пробела (U + 0020) на глиф. Информация для несколько совместимых с браузером css и создание пользовательского веб-шрифта

Ответ 2

Я сомневаюсь, что это может быть достигнуто с помощью CSS. Это селектор ar, предназначенный для выбора тегов, а не обычного текста.

Я рекомендую вам использовать часть script replace - server или client. Вы можете попробовать использовать PHP preg_replace или JavaScript replace функции.