– encoding of em dash when inserted using CSS :after

Question

I'm getting the old – on my page when I try to render an em dash ( — ). This can be cleared up by adding <meta charset="utf-8"> to the document head, I believe. But in this case I'm inserting the em dash via css.

.el:after{
   content: "— content to be after";
}

Somehow it is not being encoded properly. content: "—"; does not work either; it only renders the amersand code. How can I solve this?

Answer 1

While setting the correct encoding is always a good thing to do, I try to avoid this situation entirely and use only ASCII characters in HTML, JavaScript and CSS:

content:"\2014"

Unicode characters are represented by \hexValue in CSS.

Beware that if the following character is 0-9 or a-f (or A-F), it will be considered part of the unicode character. You can put a space after it: "\2014 stuff", and the space won't be displayed (it just marks the end of the character). To actually put a space after it, use two spaces.

Answer 2

Try adding the following on top of your stylesheet

@charset "UTF-8";

Your HTTP server (Apache, Nginx, etc) probably is specifying a different charset. It should be responding with:

Content-Type: text/css; charset=UTF-8

For for info see http://www.w3.org/