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