Add a space (" ") after an element using :after

Question

I want to add a blank space after some content, however the content: " "; doesn't seem to work.

This is my code:

h2:after {
    content: " ";
}

... which doesn't work, however this does:

h2:after {
    content: "-";
}

What am I doing wrong?

I don't understand the expected outcome. Are you trying to add `padding` using `content`. It seems like it'd be impossible to tell if the space was added. — fncomp, Mar 29 '11 at 03:35
It is a weird question, you should use *padding* for adding space, no *content:after*, maybe you do not know about the difference between display:inline and display:block? — Littlemad, Mar 29 '11 at 03:43
I understand that you are doing that, but why would you use something that it is less retro browser compatible, when you can use padding that has more support? — Littlemad, Mar 29 '11 at 03:45
I'm adding a background to the h2 that I don't want to appear behind the text, so I use the :first-line psuedo element and set the background-color to white, however then the background image sits up against the last letter of the h2, so I used the :after psuedo element to add a space. — bradley.ayers, Mar 29 '11 at 03:59
I found adding a space using this method was also useful when `overflow: hidden` of a block element would cut off the last few pixels of the last character of italic text. Padding wouldn't help in this case. — Joe Waller, Aug 21 '13 at 08:47
Padding doesn't help if you want your space to be underlined using `text-decoration: underline;` either. — dmitry_romanov, May 04 '14 at 16:17
Is it possible that since this question was originally asked back in 2011, things have changed in the browsers for this matter?? Because I am using (content: " ") and it works just fine (no need for encoding)... — TheCuBeMan, Nov 02 '15 at 09:06

bradley.ayers · Answer 1 · 2017-08-22T04:14:28.177

672

Turns out it needs to be specified via escaped unicode. This question is related and contains the answer.

The solution:

h2:after {
    content: "\00a0";
}

edited Aug 22 '17 at 04:14

answered Mar 29 '11 at 03:45

bradley.ayers

37,165
14
93
99

78

Worth nothing that this will add a NON-BREAKING space. If you want a normal space, you need "\0020" instead of "\00A0". – Offlein Jun 16 '14 at 19:21
6

Might be worth noting, too, that adding a normal space won't do anything. If you have no whitespace between the text in this, and the preceding element, this will not add one. A normal space will just collapse into itself. – mheim Jul 22 '15 at 15:57
3

@Offlein please add ` \0020` as a separate answer because some fonts, eg Font Awesome will not allow `\00A0` to display a space, and if you want a space *between* elements rather than before or after you can't use padding – Mousey Oct 15 '15 at 23:02
How do you add space after something that is already in the content? – vsync Oct 20 '15 at 11:16
@vsync I had to put a space between the content and the special character. For example: "Hello \00a0". – shanebo Oct 25 '15 at 05:58
A newer better answer uses `white-space: pre;`. Because you don't want Non-breaking chars in this case. – ctrl-alt-delor Feb 28 '18 at 10:42
This solution is now deprecated, please use '\xa0' – François Dupont Mar 23 '18 at 13:57
2

@FrançoisDupont, do you have a resource describing this change? – isherwood Jul 09 '18 at 20:22
Thanks but I think Oriol's answer is more comprehensive. – bradley.ayers Oct 01 '18 at 07:31

Oriol · Accepted Answer · 2017-01-11T20:43:36.250

Explanation

It's worth noting that your code does insert a space

h2::after {
  content: " ";
}

However, it's immediately removed.

From Anonymous inline boxes,

White space content that would subsequently be collapsed away according to the 'white-space' property does not generate any anonymous inline boxes.

And from The 'white-space' processing model,

If a space (U+0020) at the end of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is also removed.

Solution

So if you don't want the space to be removed, set white-space to pre or pre-wrap.

h2 {
  text-decoration: underline;
}
h2.space::after {
  content: " ";
  white-space: pre;
}

<h2>I don't have space:</h2>
<h2 class="space">I have space:</h2>

Do not use non-breaking spaces (U+00a0). They are supposed to prevent line breaks between words. They are not supposed to be used as non-collapsible space, that wouldn't be semantic.

It looks like `white-space` is not supported in iE11 nor Edge (see https://caniuse.com/#search=white-space). is therefore the answer by user bradley.ayers better? (I don't know, there are other aspects like semantics or line-break behavior) — chimos, Aug 23 '18 at 09:08

score 10 · Answer 3 · edited Sep 07 '15 at 17:14

I needed this instead of using padding because I used inline-block containers to display a series of individual events in a workflow timeline. The last event in the timeline needed no arrow after it.

Ended up with something like:

.transaction-tile:after {
  content: "\f105";
}

.transaction-tile:last-child:after {
  content: "\00a0";
}

Used fontawesome for the gt (chevron) character. For whatever reason "content: none;" was producing alignment issues on the last tile.

score 0 · Answer 4 · answered Jun 07 '22 at 11:06

0

try...

<span>first part</span>
<span>&nbsp;&#8203;</span>
<span>second part</span>

..."" (or "&ZeroWidthSpace;") allows "first part" and "second part" to wrap if necessary

answered Jun 07 '22 at 11:06

TerrorBight

334
4
23

score -3 · Answer 5 · answered Aug 03 '20 at 11:15

-3

There can be a problem with "\00a0" in pseudo-elements because it takes the text-decoration of its defining element, so that, for example, if the defining element is underlined, then the white space of the pseudo-element is also underlined.

The easiest way to deal with this is to define the opacity of the pseudo-element to be zero, eg:

element:before{
  content: "_";
  opacity: 0;
}

answered Aug 03 '20 at 11:15

user2581182

11
1

could be a useful approach in some cases – Dvaeer Aug 13 '20 at 11:51
1

But then when you copy the text you get the underscore copied too... – CherryDT Aug 19 '20 at 18:49
That's not a problem. Simply add `user-select:none;` to the definition of the pseudo-element. That should work in all browsers except for a few Android ones that are quirky in this respect. – user2581182 Aug 21 '20 at 10:21

score -5 · Answer 6 · edited Sep 16 '20 at 15:17

-5

element::after { 
    display: block;
    content: " ";
}

This worked for me.

edited Sep 16 '20 at 15:17

AskYous

4,332
9
46
82

answered Aug 19 '20 at 18:45

Rucha

1

Add a space (" ") after an element using :after

6 Answers6

Explanation

Solution

Linked

Related