CSS: how to add white space before element's content?
None of the following code works :
p:before { content: " "; }
p:before { content: " "; }
How do I add white space before element's content ?
Note: I need to color the border-left and the margin-left for semantic use and use the space as colorless margin. :)
You can use the unicode of a non breaking space :
p:before { content: "\00a0 "; }
See JSfiddle demo
[style improved by @Jason Sperske]
Don't fart around with inserting spaces. For one, older versions of IE won't know what you're talking about. Besides that, though, there are cleaner ways in general.
For colorless indents, use the text-indent
property.
p { text-indent: 1em; }
JSFiddle demo
Edit:
If you want the space to be colored, you might consider adding a thick left border to the first letter. (I'd almost-but-not-quite say "instead", because the indent can be an issue if you use both. But it feels dirty to me to rely solely on the border to indent.) You can specify how far away, and how wide, the color is using the first letter's left margin/padding/border width.
p:first-letter { border-left: 1em solid red; }
Demo