Is there a way to trick IE7 into using the pseudo elements :after and :before?

Question

I have a nav bar in my footer of my page which is all set up and working in everything except, of course, in IE7. I used the :after pseudo element to place a pipe "|" after each <li> in the nav bar, but in IE7, it doesn't show up. It's not a big thing, it's not that ugly, but I can't seem to find anything to cludge it or trick IE7 to make it work.

Answer 1

Haven't tried it myself.

But I have a bookmark for some time now.

Check it out: http://forabeautifulweb.com/blog/about/enable_css_pseudo-element_selectors_in_internet_explorer_with_ie-css3.js/

EDIT:

Make sure you also read the comments which contains also some useful info (jQuery for example)

Answer 2

No.

As of 2012-01-03, this script only supports :before and :after on IE8: http://code.google.com/p/ie7-js/

As of 2012-01-03, Selectivizr, which is mentioned here doesn't have :before and :after.

As of 2012-01-03, this doesn't look ready (though maybe it is): https://github.com/kevindees/ie7_pseudo_elements

I've been looking for a while now for a way to get these pseudoelements working on IE7, but looks like it can't be done.

Answer 3

Personally I would probably use jQuery to add a <span>|</span> :before or :after. If you only need it for this simple issue it would probably be a lot more lightweight than entire libraries (of course this only makes sense if you are already using jQuery.

$('.element-with-after-class').append('<span class="ie-safe-pseudo-after>|</span>');

or

$('.element-with-before-class').prepend('<span class="ie-safe-pseudo-before>|</span>');

or

$('.element-with-after-class:not(.element-with-after-class:last-child)').append('<span class="ie-safe-pseudo-after>|</span>');

Answer 4

Here's your working IE7 code:

HTML:

<ul>
    <li>link</li>
    <li>link</li>
    <li>link</li>
    <li>link</li>
</ul>​

CSS:

li {display: inline;}
li {*zoom: expression( this.runtimeStyle.zoom="1", this.insertBefore( document.createElement("i"), this.firstChild).className="ie-before" );}
li .ie-before {*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '|');}​