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
– fncomp, Commented Mar 29, 2011 at 3: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
– Littlemad, Commented Mar 29, 2011 at 3:43
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
– Joe Waller, Commented Aug 21, 2013 at 8:47
Padding doesn't help if you want your space to be underlined using text-decoration: underline; either. — dmitry_romanov
– dmitry_romanov, Commented May 4, 2014 at 16:17

bradley.ayers · Accepted Answer · 2017-08-22 04:14:28Z

699

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, 2017 at 4:14

answered Mar 29, 2011 at 3:45

bradley.ayers

38.5k14 gold badges98 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Offlein Over a year ago

Worth nothing that this will add a NON-BREAKING space. If you want a normal space, you need "\0020" instead of "\00A0".

mheim Over a year ago

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.

Mousey Over a year ago

@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

vsync Over a year ago

How do you add space after something that is already in the content?

isherwood Over a year ago

@FrançoisDupont, do you have a resource describing this change?

|

Oriol · Accepted Answer · 2017-01-11 20:43:36Z

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

durron597 · Accepted Answer · 2015-09-07 17:14:21Z

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.

TerrorBight · Accepted Answer · 2022-06-07 11:06:17Z

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

humairah codes · Accepted Answer · 2023-10-11 10:12:03Z

Use the following code, it will add space to the content pseudo element and also keep the spacing.

content: "attr";

user2581182 · Accepted Answer · 2020-08-03 11:15:05Z

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

But then when you copy the text you get the underscore copied too...
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.

AskYous · Accepted Answer · 2020-09-16 15:17:39Z

-5

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

This worked for me.

edited Sep 16, 2020 at 15:17

AskYous

4,8089 gold badges57 silver badges92 bronze badges

answered Aug 19, 2020 at 18:45

Rucha

1

Collectives™ on Stack Overflow

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

7 Answers 7

10 Comments

Explanation

Solution

2 Comments

Comments

1 Comment

Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

10 Comments

Explanation

Solution

2 Comments

Comments

1 Comment

Comments

3 Comments

Comments

Linked

Related