Lowter

Characters in CSS Generated Content

Published on the 11th of January 2007

By Ethan Poole

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:

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.

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:

CSS

p#more_articles:after {
    content: " \0000BB";
}

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.

Opera 9. Innovation delivered. Download Now (external link)