Using glyphs in CSS content property

When adding content using the CSS content property you’ll find that you can’t use usual HTML entities. Instead, you need to use the escaped unicode value for the glyph.

For example if you want to render a ‘proper’ opening quote before a blockquote element you might try the following:

blockquote:before {
  content: "“"
}

You’ll find the “ appears in your rendered HTLM. Instead, you need to use the escaped unicode value - in this case \201c:

blockquote:before {
  content: "\201c"
}

Here’s a great list of glyphs along with their HTML entities and unicode values »

Tagged code