Visualize whitespaces using css

Question

Is there some way to visualize whitespaces in text using only CSS without altering the original HTML code? Lets say the HTML is:

<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> 

• paragraph end (¶) -> can use :after
• line break (↵) -> can use :after
• space (·) -> the only way I can think of is to prepend all spaces with something like <span class='space' /> and the use :after

The last one does not fulfill the condition to use only CSS and original HTML. Is there some way to do that?

EDIT: as requested, here is CSS for the pilcrow sign after the paragarph: .paragraph:after { content: "¶"; }

Answer 1

javascript and php are probably easier, but if you insist on CSS you can use a custom web font and replace the space character (U+0020) with a glyph. Information for somewhat browser compatible css and generating custom web font

Answer 2

I doubt this can be achieved by CSS. It's selectors ar designed to select tags, not plain text.

I recommend you to use some script replace - server or client side. You can try to use PHP preg_replace or JavaScript replace functions.