CODEWITHSUNDEEP
cssencodingcharacter-encoding
1252748
1252748

Reputation: 15372

– encoding of em dash when inserted using CSS :after

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: "&mdash;"; does not work either; it only renders the amersand code. How can I solve this?

Upvotes: 6

Views: 4677

Answers (2)

Dave
Dave

Reputation: 46259

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.

Upvotes: 10

Arnold Daniels
Arnold Daniels

Reputation: 16573

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/

Upvotes: 3

Related Questions