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 ( ) |
\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 |
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:
- Images are not characters, and;
- 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.