How to Add Space Before or After an Element Using CSS Pseudo Elements?

In most cases, you should be able to use the normal space character ( or \20) to add space before or after an element using the content property with ::before or ::after pseudo-elements. However, it won't work in some cases, as the spaces might be collapsed or removed. To overcome this, you can do either of the following:

#Using white-space Property Value That Preserves Spaces

You can use the pre, pre-wrap or break-spaces as the value of the CSS white-space property to preserve spaces. Consider, for example, the following:

<span>foo</span>
span { border: 1px solid orange; }

span::before,
span::after {
    content: ' ';
    white-space: pre;
}

You can see the comparison between white-space set to normal and pre, for example, in the table below:

white-space: Description Result
normal Collapsed spaces are removed from start and end of line. foo
pre Spaces at start and end of line are preserved. foo

#Using an Alternative Unicode Space Character

As an alternative to the normal space character (\20), you can use the Unicode code point value of the non-breaking space character (i.e. \a0), for example, like so:

.selector::after { content: '\a0'; }

The non-breaking space character (\a0) should be enough for most cases. However, alternatively, you may choose from several other space characters depending on your use case:

Character Name Escaped Unicode Description Examples
Space \0020 Normal space — width depends on the font, it's typically 1/4 em and usually stretches on text justification. Depending on the white-space property, this space character might collapse or be removed. foo bar
No-break Space (&nbsp;) \00a0 Same width as normal space, but it does not wrap words on either of its side and typically does not stretch/adjust on text justification. Commonly used with french punctuation, period of day, rates and ratios. foo bar
10 km/h
10:00 pm
Au secours !
En Quad \2000 Width of 1 en (or 1/2 em); canonically equivalent to En Space. foo bar
Em Quad \2001 Width of 1 em (in CSS, it's equivalent to height of the font in nominal points or inches); canonically equivalent to Em Space. foobar
En Space (&ensp;) \2002 Canonically equivalent to En Quad — in HTML/XML En Space is preferred. foobar
Em Space (&emsp;) \2003 Canonically equivalent to Em Quad — in HTML/XML Em Space is preferred. It may scale by the condensation factor of a font. foobar
Three-per-em Space (&emsp13;) \2004 1/3 em; also known as "thick space". foobar
Four-per-em Space (&emsp14;) \2005 1/4 em; also known as "mid space". foobar
Six-per-em Space \2006 1/6 em — in computer typography it's sometimes equated to Thin Space. foobar
Figure Space (&numsp;) \2007 Equal to the tabular width of a single digit of fonts with monospaced/fixed-width digits. foobar
Punctuation Space (&puncsp;) \2008 As wide as the narrowest punctuation in a font, usually a period ".". foobar
Thin Space (&thinsp;) \2009 1/5 em (or sometimes 1/6 em) — its width may get adjusted in typesetting. foobar
Hair Space (&hairsp;) \200A Thinner (or narrower) than a Thin Space. foobar
Zero Width Space (&NegativeMediumSpace;) \200B Nominally no width, but may expand in text justification. It's intended for line break control and invisible word separation (or to indicate word boundaries usually to text processing systems). It can be used after characters (such as the slash "/") that are not followed by a visible space to prevent a line break. foobar
Narrow No-Break Space \202F Narrower than No-Break Space (or Normal Space) foobar
Medium Mathematical Space (&MediumSpace;) \205F Used in mathematical formulae, it's 4/18 em. foobar
a+b
Ideographic Space \3000 The width of ideographic/CJK (Chinese, Japanese and Korean) characters. foo bar
Ideographic Space \3000 The width of ideographic/CJK (Chinese, Japanese and Korean) characters. foo bar
Word Joiner (&NoBreak;) \2060 Similar to Zero Width Space, but does not prevent a line break. foobar

Once you've selected the Unicode code point for the space character you wish to use, you can simply add it using the following CSS code:

.selector::after { content: '\00a0'; }

You may add additional text before or after the space character by separating them using white-space, for example, like so:

.selector::before { content: ', \00a0'; }

By convention, an escaped Unicode character is six digits long, but leading zeros are optional in CSS (which is why you can write \0000a0 in the shorter form \a0). This may cause issues when you use multiple Unicode character escapes in the short form, in the same string, because the characters that follow it might be interpreted as a part of its number sequence.

Issues With Images:

For all Unicode characters that affect the line-breaking of a text, you must note that it may not have the same effect on images simply because:

  1. Images are not characters, and;
  2. Browsers are not required to implement these Unicode semantics for images.

For images, you can use, for example, the CSS white-space: nowrap property/value pair instead.

Avoiding Unwanted Behavior With Lists:

In cases where you're working with a horizontal list, make sure you set the last or first item in the list's ::before / ::after content as an empty string, for example, like so:

li::after { content: ', \00a0'; }
li:last-child::after { content: ''; }
li::before { content: ', \00a0'; }
li:first-child::before { content: ''; }

This will help you avoid unwanted behavior, such as text-wrapping, unnecessary or unwanted space, etc.


This post was published (and was last revised ) by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.