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

Question

I have a navigation bar in my footer of my page, which is configured and works in everything except, of course, in IE7. I used: after the pseudo-element to put the pipe "|" after each <li>in the navigation bar, but in IE7 it is not displayed. It doesn’t matter, it is not so ugly, but I cannot find anything to connect it or trick IE7 to make it work.

Answer 1

I have not tried it myself.

But I have had a bookmark for some time now.

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

EDIT:

, , (, jQuery)

Answer 2

.

2012-01-03 script : before : after IE8: http://code.google.com/p/ie7-js/

2012-01-03, Selectivizr, , : before : after.

2012-01-03, (, , ): https://github.com/kevindees/ie7_pseudo_elements

- , IE7, , .

Answer 3

, , jQuery <span>|</span> :before :after. , , , , (, , jQuery.

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

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

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

Answer 4

Here is 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 = '|');}​