15

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.

Improve this question
1
  • 2
    You can use escapes like this content: '\20AC';, which can be useful in some cases, such as for white space characters, but for the euro symbol, just go with Advocation's answer.
    – Alohci
    Dec 6, 2013 at 17:34

2 Answers 2

Reset to default
20

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.

Improve this answer
1
  • 3
    Despite '\20AC' being less readable, I'd prefer it over coupling encodings between my HTML and CSS. Using an escape is the more reliable option and you're bound to run into them at some point so knowing what they are by that time isn't a bad thing either :)
    – SidOfc
    May 2, 2019 at 14:41
8

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

.my-span:after {
    content: '€';
}
Improve this answer
3
  • 2
    Thank you but as I said in question, I already tried it and it didn't work. Jukka's answer solved my problem.
    – Alan Piralla
    Dec 12, 2013 at 8:43
  • Heads up: if you try this in SCSS (SASS) and try to compile it, the compiler will throw an error because of an unexpected character. I tested with Prepros v4.
    – chocolata
    Aug 24, 2015 at 9:24
  • Tied it using SASS 3.4.18 and it didnt't throw an error. It did output random characters, though...
    – zoku
    Sep 9, 2015 at 11:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.