how to display euro symbol in css after and before pseudoelements

Question

I can't figure out how to let CSS display the Euro symbol (€) in :before and :after pseudoelements.

.my-span:after {
    content: '€';
}

Tried with the symbol €, u20AC and %u20AC. Nothing seems to work.

Thanks in advance.

Answer 1

Using the character “€” as such works provided that the declared character encoding of the CSS file (or, if the style sheet appears inside an HTML file, of the HTML file) coincides with the actual encoding.

Since servers normally do not specify character encoding for CSS files, it should suffice to save the file as UTF-8 encoded with BOM. The BOM lets browsers auto-recognize the encoding.

If this is not feasible, use the method mentioned by @Alohci: '\20AC'. This is a CSS escape that works independently of character encodings, but it’s not particularly readable.

Answer 2

You should just be able to use the symbol - http://jsfiddle.net/8Wz9B/

.my-span:after {
    content: '€';
}