CSS pseudo element ▼ becomes gibberish in IE

Question

I'm using the ▼ character as the content of my pseudo element:

a:after {
    content: '▼';
}

This works great in all modern (read: non-IE) browsers:

but in IE(9), I just get gibberish instead:

---

I guess this has something to do with the character encoding, but I don't know where to start.

Answer 1

Make sure that both your page and your stylesheet are encoded and served as UTF-8. Most editors should be able to tell you the encoding of any open file.

You can also opt to use the Unicode sequence \9660 instead, but again you need to ensure that your documents are encoded as UTF-8 otherwise it may not work correctly either:

a:after {
    content: '\9660';
}

Or if your stylesheet has a @charset rule, it needs to point to UTF-8:

@charset "UTF-8";

Note that @charset rules need to appear at the very beginning of a stylesheet; in @imported files I believe this should not be an issue, but seeing as Sass actually combines files together that are linked by @import rules during compilation, this will cause errors. For Sass/SCSS, you'll need to place the @charset rule at the beginning of your master stylesheet.