8

Possible Duplicate:
Adding HTML entities using CSS content

I have the following setup

CSS:

.header:before {
    content: "«";
}

.header:after {
    content: "»";
}

HTML:

<h3 class="header">Hello, this is some text which should be wrapped.</h3>

I'd simply like whatever is written in header to be wrapped in « (&laquo;) and » (&raquo;). How can I make this work in the CSS? It's currently appearing as:

&laquo; Hello, this is some text which should be wrapped. &raquo;

rather than:

« Hello, this is some text which should be wrapped. »

Community
  • 1
  • 1
Naftuli Kay
  • 87,710
  • 93
  • 269
  • 411

1 Answers1

10

You can't use HTML entities in CSS, but you can use Unicode hex escapes, such as

span.url:before { content: "\27e8" }
span.url:after { content: "\27e9" }

(from one of my own stylesheets -- look up the hex codepoints for the exact characters you want yourself). Notice that unlike in some other notations, hex digits follow the backslash directly, with no intervening u.

hmakholm left over Monica
  • 23,074
  • 3
  • 51
  • 73
  • Nice one! I didn't know that. – Diodeus - James MacFarlane Aug 18 '11 at 20:55
  • +1 and see also [CSS Syntax and basic data types](http://www.w3.org/TR/CSS2/syndata.html) – Richard JP Le Guen Aug 18 '11 at 20:59
  • But how do you get these unicode codes? It doesn't appear to be the same as the numeric code for characters. ↓ is a down arrow, but \8595 is some Chinese character. There's a million posts just like this one. In all of them, someone says "use this code for that character" but no one explains how you get these codes. – l008com Jan 07 '19 at 16:05
  • @l008com: It's simply four hex digits giving the Unicode codepoint as a base-16 number, same as it can be looked up in the code charts in the Unicode standard. XML/HTML `` entities use base 10 by default, so the digits for any particular codepoint will be different from the base 16 representation. – hmakholm left over Monica Jan 07 '19 at 19:07