Search code examples
cssunicodespecial-characters

Use special characters in the CSS content

Which is the correct way of using it? Unicode or just the character itself, although the results seem to be the same.

h1:before {
    content: "\263A";
}
h1:after {
    content: "☺";
}
<h1>Smile</h1>

Solution

  • The results are the same if the character encoding of the file containing this code has been appropriately declared. See the W3C page Character encodings and the linked resources, but note that the advice “Try to avoid using the byte-order mark in UTF-8” is not correct. Using the byte order mark (BOM) adds extra protection; advice to the contrary is either outdated or relates to PHP, which is a different issue. So basically you should save your CSS file as UTF-8 encoded with BOM.

    Using references like "\263A" avoids the character encoding issue, at the cost of source readability. The rest is rather opinion-based.