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.