CSS Unicode Escapes

CSS can represent a Unicode character with a backslash followed by one to six hexadecimal digits. For example, \2192 represents → and \2713 represents ✓.

Terminate Ambiguous Escapes

If a hexadecimal digit follows the escape, add a space after the code point: content: "\2713 Ready";. CSS consumes that first space as the escape terminator. Alternatively, pad the escape to six hexadecimal digits, such as \002713.

Generated Content Example

.complete::before {
  content: "\2713";
  margin-right: .35em;
}

Generated symbols should not be the only source of meaning because pseudo-element content may not be exposed consistently to assistive technology. Keep important text in the document itself.

Escapes in Identifiers

CSS escapes can also represent unusual characters in class names or IDs, but simple ASCII identifiers are generally easier to maintain. When selecting an ID that contains a colon or punctuation, escaping that punctuation may be required.