How to Add a Unicode Character to CSS "content" Property?

To add a Unicode character to the CSS content property, you can do either of the following:

• Add a Unicode character directly, or;
• Use the Character's Hexadecimal Unicode Code Point Value.

Add a Unicode Character Directly

You can add a Unicode character directly to the CSS content property, for example, like so:

.foo::after {
    content: '❤';
}

If for some reason, the Unicode characters are not displayed properly, it could be that your CSS file is in a different encoding than the encoding of your HTML page (which defaults to UTF-8). Ideally, you should have all your web documents in the same encoding (preferably UTF-8). If you wish to have a different encoding for your CSS file, then you must either declare its encoding at the start of your CSS file using the @charset CSS at-rule, or use the charset directive in the Content-Type HTTP header to declare the correct encoding.

Use the Character's Hexadecimal Unicode Code Point Value

You can use a character's hexadecimal Unicode code point value in the CSS content property by escaping it (i.e. using a backslash followed by the character's hexadecimal numeric sequence).

For example, the copyright symbol is represented as U+00A9. To add it via the CSS content property, you would escape it like so:

.foo::after {
    content: '\A9'; /* '©' */
}

By convention, an escaped hexadecimal number should be six characters long. Typically, to shorten it, leading zeros are omitted as they're optional (as you can see in the example above). In case you opt for excluding the leading zeros, please remember to separate multiple words and/or character escapes by a space, such as in the following example:

.foo::after {
    content: '\E9' 'cho'; /* 'écho' */
}

If you don't separate characters by space, then the characters in the range of A–F, a–f or 0–9 that follow an escaped character would be interpreted as a part of its number sequence. For example:

.foo::after {
    content: '\E9cho'; /* 'ຜho' */
}

You could, of course, instead make the escape sequence six characters long and avoid having to add a space altogether like so:

.foo::after {
    content: '\0000E9cho'; /* 'écho' */
}

If your CSS file is using UTF-8 encoding then you won't normally need to use character escapes (except for, maybe in cases when you want to represent invisible or ambiguous characters, such as whitespace characters, etc.).