12

I've read that we must use Unicode values inside the content CSS property i.e. \ followed by the special character's hexadecimal number.

But what characters, other than alphanumerics, are actually allowed to be placed as is in the value of content property? (Google has no clue, hence the question.)

Community
  • 1
  • 1
its_me
  • 10,998
  • 25
  • 82
  • 130
  • Check out these charts for availability; http://www.unicode.org/charts/ Keep in mind that controls (reserved codes) probably won't do anything, or either make the output and/or CSS invalid. –  Mar 26 '13 at 17:40
  • Keep in mind that you can basis alpha-numeric just "as is". For special HTML characters like `<` (`003C`) you would want to go for the Unicode variant. –  Mar 26 '13 at 17:46
  • @Allendar Yes, I know that, just wanted to know, as something I tried wasn't working earlier (but is working now -- weird). Thanks for the suggestion by the way. Appreciate! – its_me Mar 26 '13 at 18:00

2 Answers2

13

The rules for “escaping” characters are in the CSS 2.1 specification, clause 4.1.3 Characters and case. The special rules for quoted strings, as in content property value, are in clause 4.3.7 Strings. Within a quoted string, any character may appear as such, except for the character used to quote the string (" or '), a newline character, or a backslash character \.

The information that you must use \ escapes is thus wrong. You may use them, and may even need to use them if the character encoding of the document containing the style sheet does not let you enter all characters directly. But if the encoding is UTF-8, and is properly declared, then you can write content: '☺ Я Ω ⁴ ®'.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Unfortunately these can cause weird render issues in Chrome. Things like first render of the site has broken CSS, then a refresh helps... – wintercounter Aug 19 '20 at 15:13
4

As far as I know, you can insert any Unicode character. (Here's a useful list of Unicode characters and their codes.)

To utilize these codes, you must escape them, like so:

U+27BA Becomes \27BA

Or, alternatively, I think you may just be able to escape the character itself:

content: '\➺';

Source: http://mathiasbynens.be/notes/css-escapes

R. Martinho Fernandes
  • 228,013
  • 71
  • 433
  • 510
Bill
  • 3,478
  • 23
  • 42