[css] 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. :)

This question is related to css unicode space css-content

The answer is

Since you are looking for adding space between elements you may need something as simple as a margin-left or padding-left. Here are examples of both http://jsfiddle.net/BGHqn/3/

This will add 10 pixels to the left of the paragraph element

p {
    margin-left: 10px;

or if you just want some padding within your paragraph element

p {
    padding-left: 10px;

/* Most Accurate Setting if you only want
   to do this with CSS Pseudo Element */
p:before { 
   content: "\00a0";
   padding-right: 5px; /* If you need more space b/w contents */

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


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


Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to unicode

How to resolve TypeError: can only concatenate str (not "int") to str (unicode error) 'unicodeescape' codec can't decode bytes in position 2-3: truncated \UXXXXXXXX escape UnicodeEncodeError: 'ascii' codec can't encode character at special name Python NLTK: SyntaxError: Non-ASCII character '\xc3' in file (Sentiment Analysis -NLP) HTML for the Pause symbol in audio and video control Javascript: Unicode string to hex Concrete Javascript Regex for Accented Characters (Diacritics) Replace non-ASCII characters with a single space UTF-8 in Windows 7 CMD NameError: global name 'unicode' is not defined - in Python 3

Examples related to space

How to create string with multiple spaces in JavaScript Removing body margin in CSS What is the symbol for whitespace in C? Using tr to replace newline with space CSS: how to add white space before element's content? Regular expression to allow spaces between words UL has margin on the left EXCEL VBA Check if entry is empty or not 'space' How do I make Java register a string input with spaces? Handling of non breaking space: <p>&nbsp;</p> vs. <p> </p>

Examples related to css-content

CSS: how to add white space before element's content? Can I have multiple :before pseudo-elements for the same element? CSS content property: is it possible to insert HTML instead of Text? Vertically aligning CSS :before and :after content Can I use a :before or :after pseudo-element on an input field? Adding HTML entities using CSS content