Breadcrumbs

Characters in CSS Generated Content

Author
Ethan Poole
Date
Thu 11 Jan 2007 at 21:57

Generated content is one of those abilities of CSS that has been around for quite some time, but I had never really found a useful situation in which to use it. However, this recently changed. When I was coding the new Lowter layout, I focused intently on having semantic markup. With this focus in mind, I found a productive use for generated content: to add presentational characters to various elements.

I immediately ran into a problem. I was attempting to add a "»" after a link, which really did not fit semantically into the markup, but it worked well on the web page visually. Using this CSS code, it seemed to work properly:

Code: CSS

p#more_articles:after {
    content: " »";
}

This code worked perfectly in Opera and Firefox. To no surprise, Internet Explorer 6 does not support generated content initially. Then, when I tested the web page in Safari the character did not display properly.

Demonstration of error in Safari

After searching around on the Internet, I came upon a page that addressed the problem (external link). CSS uses the character encoding of ISO 10646 (external link). Therefore, I changed the code to:

Code: CSS

p#more_articles:after {
    content: " 000BB";
}

This code works across all browsers that support generated content. So, if you are working in CSS just keep in mind to use the proper character encoding when generating content.

Tags: