Special characters generated through CSS
Most of you are by now familiar with the CSS ::before and ::after pseudo elements, but have you ever tried using it to insert an HTML entity? (In plain English, an unusual character.)
#nav li::before { content:'»'; }
Well, it took me a little while before I finally discovered that you in fact, can not insert HTML entities directly through CSS like this, no, CSS requires that you use the Escaped Hexidecimal Unicode equivalent. See below.
#nav li::before { content:'\187'; }
Chances are, most people will have no clue where to find Unicode equivalents for HTML entities, but here's a web site that has a comparison chart.
Note:
Some people use :before instead of ::before. While the W3C may have been ambiguous about this type of thing in the past, it is now understood that :foo represents a pseudo-class and ::foo represents a pseudo-element.
Related URLs:
Mar 26, 2008
Comments
Hmm,
I have to use the "ANSI Hex" for characters to display correctly.
Is that normal?
I posted a CSS/javascript entity calculator. If you know the HTML numeric entity, the calculator produces the correct format for CSS and javascript.
Amazing. Thanks for this, I never would have figured this bloody thing out... was looking for how to stick Mr. Laquo and Ms. Raquo with my CSS. Thanks once again!
Write a comment
* = required field