How can I add white space before an element's content using CSS?

Question

None of the following code works:

p:before { content: " "; }
p:before { content: "&nbsp;"; }

How do I add white space before an element's content?

Note: I need to color the border-left and the margin-left for semantic use and use the space as a colorless margin. :)

Maybe because margin / padding affects whole block. text-indent would be a better choice — nice ass, May 14 '13 at 20:44
I need to color the border-left and the margin-left for semantic use :) I may add several `element:before { content:"[a kind of space]"; background: mycolor;}` as well. All ways I wanted to know a way to add spaces, kinda fun! — Hugolpz, May 14 '13 at 21:16
@Hugolpz: You could do basically the same thing with `p:first-letter { border-left: 1ex solid mycolor; }`. — cHao, May 14 '13 at 21:18
@carn margins are static, space width is relative to font size — undefined, May 14 '15 at 02:57

score 305 · Accepted Answer · edited Oct 01 '22 at 15:16

305

You can use the Unicode code point of a non-breaking space:

p:before { content: "\00a0 "; }

See JSfiddle demo (style improved by Jason Sperske).

edited Oct 01 '22 at 15:16

Peter Mortensen

30,738
21
105
131

answered May 14 '13 at 20:36

Hugolpz

17,296
26
100
187

2

I made a slight edit so you can see it's effect: http://jsfiddle.net/uMFHH/3/ (otherwise it just looks like a margin, which brings up a good question, why not just add a margin?) – Jason Sperske May 14 '13 at 20:40
Because I need to color the border-left and the margin-left :) – Hugolpz May 14 '13 at 21:10
4

Why the space at the end of `"\00a0 "`? Is that necessary or can we just do `"\00a0"`? – jbyrd Nov 27 '18 at 13:35
2

@jbyrd: not neccessary (see http://jsfiddle.net/nhyw6e9q/ ). I left it there to show that normal space are not accounted for. – Hugolpz Mar 06 '19 at 14:35

score 46 · Answer 2 · edited Oct 01 '22 at 15:12

46

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

Demo

edited Oct 01 '22 at 15:12

Peter Mortensen

30,738
21
105
131

answered May 14 '13 at 20:40

cHao

84,970
20
145
172

2

If you're stuck supporting IE<8, this method will work while before/after pseudo elements will not. – cimmanon May 14 '13 at 20:55
1

@cimmanon: Yep. According to MDN, this works even in IE 3 (though i didn't even realize they *had* CSS back then :P). – cHao May 14 '13 at 20:59
1

You cannot color an indentation such `{ text-indent: 1em; }`. But we can color a space such `:before {content: "\00a0 "; background: #000; }`. [See Fiddle](http://jsfiddle.net/hugolpz/3ng7W/1/) – Hugolpz May 14 '13 at 21:21
1

@Hugolpz: A text-indent? Nope. can't color that differently, AFAIK. But [a border? Sure.](http://jsfiddle.net/3ng7W/2/) :) – cHao May 14 '13 at 21:22
Oh, we cannot add several content, [see Fiddle](http://jsfiddle.net/3ng7W/4/). Too bad... – Hugolpz May 14 '13 at 21:35
Yeah...`:before` basically picks the imaginary element that precedes a real element. If you say `p:before` twice, you select that same pseudo-element both times. – cHao May 14 '13 at 21:38
This `:first-letter {border-left: }` is witty! +1 – Hugolpz May 14 '13 at 21:39
1

I was going to say that in my situation I can not use the padding, but I thought about it a little and then figured out how to do it, such a better solution, for MY situation anyway. – BillyNair Dec 14 '15 at 23:58

score 12 · Answer 3 · edited Oct 01 '22 at 15:15

12

/* Most accurate setting if you only want
   to do this with a CSS pseudo element */
p:before { 
    content: "\00a0";
    padding-right: 5px; /* If you need more space between contents */
}

edited Oct 01 '22 at 15:15

Peter Mortensen

30,738
21
105
131

answered Aug 06 '18 at 12:19

Piyush

123
1
7

score 11 · Answer 4 · edited Oct 01 '22 at 15:14

11

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

edited Oct 01 '22 at 15:14

Peter Mortensen

30,738
21
105
131

answered May 14 '13 at 21:00

Matt

2,500
1
16
26

How can I add white space before an element's content using CSS?

4 Answers4

Linked