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

Simply specifying blank space as the value of the content property when using CSS pseudo elements such as ::before and ::after does not add space. To do that we need to specify the value of the CSS content property as an escaped unicode character. In this article, we will look at ways to do that.

Unicode Space Characters

Before we begin, we'll look at some of the different space characters available to us and their unicode representation:

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

Adding Space to an Element via CSS Pseudo Elements

Once you've selected the space character you wish to insert, simply add it using the following CSS code:

div::after { content: '\00a0'; }

Adding Content Before or After the Space Character

If we were to add some content before or after the space character, then you will have to put a white-space between the content and the special character. For example:

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

Another way we could avoid misinterpretation of words that come after the space character is to use exactly six hexadecimal digits for the unicode escape sequence. If a character's unicode escape sequence isn't exactly six digits long you can always prepend zeros till you get there. For example:

div::after { content: '\0000a0Hello'; }

To keep your CSS code future-proof it's best to simply add a white-space character wherever you wish to add content before or after the space character, because should unicode start supporting code points beyond U+10FFFF in the future, it would require a update of the CSS Spec.

Avoiding Unwanted Behavior:

In cases such as where you're working with a horizontal list, make sure to set the last or first item in the list's pseudo element content as an empty string (e.g. content: '';) to avoid strange behavior such as text-wrapping, unnecessary or unwanted space, etc.

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

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