CSS generated content allows authors to insert special characters using the Unicode notation and an escape sequence. Such characters must be placed as values of the content property. The first thing you should bear in mind is that not all Unicode characters are currently supported by web browsers. Unicode encompasses more than 65,000 characters, including letters of ancient alphabets and graphic icons. If you want to test your browser's support to Unicode characters, visit www.alanwood.net/unicode/. When a browser doesn't support a specific character, it replaces the missing character with a default glyph (usually a square). CSS specifications say:
Third, backslash escapes allow authors to refer to characters they cannot easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 ([ISO10646]) character with that number, which must not be zero. (It is undefined in CSS 2.1 what happens if a style sheet does contain a character with Unicode codepoint zero.) If a character in the range [0-9a-fA-F] follows the hexadecimal number, the end of the number needs to be made clear. There are two ways to do that:
- with a space (or other white space character): "\26 B" ("&B"). In this case, user agents should treat a "CR/LF" pair (U+000D/U+000A) as a single white space character.
- by providing exactly 6 hexadecimal digits: "\000026B" ("&B") In fact, these two methods may be combined. Only one white space character is ignored after a hexadecimal escape. Note that this means that a "real" space after the escape sequence must be doubled.
If the number is outside the range allowed by Unicode (e.g., "\110000" is above the maximum 10FFFF allowed in current Unicode), the UA may replace the escape with the "replacement character" (U+FFFD). If the character is to be displayed, the UA should show a visible symbol, such as a "missing character" glyph (cf. 15.2, point 5).
Note: Backslash escapes are always considered to be part of an identifier or a string (i.e., "\7B" is not punctuation, even though "{" is, and "\32" is allowed at the start of a class name, even though "2" is not). The identifier "te\st" is exactly the same identifier as "test".
Here's an example that shows you how to insert an '@' just before a specific target link:
a.twitter:before {
content: '\0040';
}
Note that in this case we've used the short version (4 digits) of the Unicode sequence. Also note how the escaped sequence must be enclosed between quotes (single or double).