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:

• Use white-space property value that preserves spaces;
• Use an Alternative Unicode Space Character.

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 ( )	\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.	foo bar
En Space ( )	\2002	Canonically equivalent to En Quad — in HTML/XML En Space is preferred.	foo bar
Em Space ( )	\2003	Canonically equivalent to Em Quad — in HTML/XML Em Space is preferred. It may scale by the condensation factor of a font.	foo bar
Three-per-em Space ( )	\2004	1/3 em; also known as "thick space".	foo bar
Four-per-em Space ( )	\2005	1/4 em; also known as "mid space".	foo bar
Six-per-em Space	\2006	1/6 em — in computer typography it's sometimes equated to Thin Space.	foo bar
Figure Space ( )	\2007	Equal to the tabular width of a single digit of fonts with monospaced/fixed-width digits.	foo bar
Punctuation Space ( )	\2008	As wide as the narrowest punctuation in a font, usually a period ".".	foo bar
Thin Space ( )	\2009	1/5 em (or sometimes 1/6 em) — its width may get adjusted in typesetting.	foo bar
Hair Space ( )	\200A	Thinner (or narrower) than a Thin Space.	foo bar
Zero Width Space (​)	\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.	foo​bar
Narrow No-Break Space	\202F	Narrower than No-Break Space (or Normal Space)	foo bar
Medium Mathematical Space ( )	\205F	Used in mathematical formulae, it's 4/18 em.	foo bar 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 (⁠)	\2060	Similar to Zero Width Space, but does not prevent a line break.	foo⁠bar

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.