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

A comprehensive guide to adding space 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. foobar
En Space ( ) \2002 Canonically equivalent to En Quad — in HTML/XML En Space is preferred. foobar
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. foobar
Three-per-em Space ( ) \2004 1/3 em; also known as "thick space". foobar
Four-per-em Space ( ) \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 ( ) \2007 Equal to the tabular width of a single digit of fonts with monospaced/fixed-width digits. foobar
Punctuation Space ( ) \2008 As wide as the narrowest punctuation in a font, usually a period ".". foobar
Thin Space ( ) \2009 1/5 em (or sometimes 1/6 em) — its width may get adjusted in typesetting. foobar
Hair Space ( ) \200A Thinner (or narrower) than a Thin Space. foobar
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. foobar
Narrow No-Break Space \202F Narrower than No-Break Space (or Normal Space) foobar
Medium Mathematical Space ( ) \205F Used in mathematical formulae, it's 4/18 em. foobar
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. foobar
  • In reference to all unicode characters that affect the line breaking of a text, you must note that it may not have the same effect on images as images are not characters, and browsers are not required to implement these unicode semantics for images. For images you can use the CSS white-space: nowrap property/value pair.
  • By convention, an escaped unicode character is six digits long but leading zeros are optional in CSS. So \00a0 can simply be rewritten as \a0.

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

Hope you found this post useful. It was published (and was last revised ). Please show your love and support by sharing this post.