how to display euro symbol in css after and before pseudoelements

css, html, pseudo-element

Solution

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.

Problem

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.

Original source