Does IE 7 support the content pseudo-class?

Question

I am generating pipes in my list using pseudo-classes and it works fine except they are not being rendered in IE 7. The code looks like:

.brandLinks a:after {
margin: 0 4px;
content: "|";
}

.brandLinks a:last-child:after {
content: " "
}

Is this just something IE 7 does not do or is my code wonky?

Answer 1

No, IE7 doesn't support this.

See http://www.quirksmode.org/css/content.html and http://www.quirksmode.org/css/beforeafter_content.html for a detailed comparison.

Furthermore, an interesting opinion to take into consideration ;-)

I feel that we shouldn't use the content declaration at all. It adds content to the page, and CSS is meant for adding presentation to the page, and not content. Therefore I feel that you should use JavaScript if you want to dynamically generate content. CSS is the wrong tool for this job.

Answer 2

CSS might be for presentation only, but in cases like when you need to clear your floats, it's very useful, too bad the famous 'clearfix' doesn't work correctly in old browers. Maybe it could be implemented with a different approach other than merely content manipulation... there are some javascripts you can find on googlecode that make old ie's support many selectors it didn't before, but not sure about pseudoclasses... might be useful

http://code.google.com/p/ie7-js/