Adding spaces and Special Characters in CSS content attributes
Last week I brought you a great way to add simple text treatments using the CSS content property.
In that example we used the ::before Pseudo-class to add ‘Color Selected:’ to a WooCommerce product page.
The problem I ran into was that the DOM render would trim that extra space. Thankfully there are a couple of options to fix this issue.
The goal of this article is to explain how to add whitespace after that content.
How to add space with the CSS content property and using Unicode Characters.
We can add a space to the end, or multiple spaces, by adding a string of unicode characters to the content:
\00a0
or
\a0 ( one added space at the end )
The final code would be
.attribute_pa_size_picker_label::before {
content: 'Size Selected: \00a0';
}
or
.attribute_pa_size_picker_label::before {
content: 'Size Selected: \a0 ';
}
Examples of using Special Characters and Unicode Characters in the CSS content Property
Every special character had to be handled differently in order to work in previous versions of web browsers. Thankfully the devs have worked most of the issues out however knowing these solutions can provide us flexibility in our web pages. There are still some times that we need to communicate the content a little differently in order for our expected content to render on the page
A ‘special character is pretty much anything that isn’t a letter or a number.
Special Characters such as: ~, `, !, @, #, $, %, ^, &, *, (, ), -, _, +, =, ., {, }, [, ], |, ’, ”, ;, :, <, >, and ,.
One solution to getting our special characters to render would to be to use the CSS version of the Unicode Character.
Checkout the whole list of Unicode Characters:
https://en.wikipedia.org/wiki/List_of_Unicode_characters
For example, if you wanted to add an email address:
The character @ would be U+0040 so for CSS we would use \000040.
The character . would be U+002E so for CSS we would use \00002E.
For my domain, I have a hyphen (-) and that character would be U+002D so for CSS we would use \00002D.
.example-class::after {
‘content’: ‘josh\000040joshbrown\00002Ddesigns\00002Ecom’;
}
These unicode systems still work, and you can use them today in your own coding.
In fact, you could even use Unicode versions of alphanumeric characters.
The uppercase letter A is, U+0041, or \000041 and the lowercase letter a is U+0061, or \000061. ( We add \00 instead of the U+)
Escaping Special Characters with a Backslash
Special Characters have a secondary way to include content by working without Unicode characters. This solution is far easier to implement.
To use a apostrophe (‘) in your content, for example, you could use the Unicode \00002F or use the even easier solution of putting a backslash (\) in front of the quotation marks:
Using the Unicode solution:
‘content’: ‘Josh\00002Fs Email’
A quicker and more elegant solution:
‘content’: ‘Josh\’s Email’
The simple addition of a backspace before the special character communicates to the browser that the following character should be taken as a hexadecimal character and to be ignored by the processor.
Adding Special Characters in CSS content with Modern Browsers
Luckily, modern versions of browsers and advancement in the CSS specs has pretty much alleviated having to work with Unicode Characters. These days using an at-symbol (@) or a greater-than than symbol ( > ) can be used in the content property without being escaped at all.
Unfortunately for our example, putting a backslash before a space (\ ) does nothing for us when attempting to create a space between our text. The whitespace is still trimmed along with the back slashes. While the backslash is a great solution for special characters, we will need to utilize the Unicode solution to insert a trailing space.
How to Add Extra Spacing by Using CSS Pseudo-classes ::before or ::after
By using the classic system of utilizing unicode characters to our CSS content property we will ensure that we have the spacing we want.
.attribute_pa_size_picker_label::before {
content: 'Size Selected: \00a0';
}
In fact, if we needed two spaces, or more, we could simply add two unicode characters:
.attribute_pa_size_picker_label::before {
content: 'Size Selected: \00a0\00a0';
}