How do you work around IE not supporting :after?

Question

I've got a bunch of lists

<ul>
  <li class="first">Item 1</li>
  <li>Item 2</li>
  <li class="last">Item 3</li>
</ul>

styled with

li:after {
  content: ' / ';
}
li.last:after {
  content: '';
}

This has to be a sort of commonplace problem. I'm thinking i could either clutter the html and put in intermediary <li>'s containing the character, or i could hook on a javascript to put them in there if IE is the loading browser, but that wouldn't catch people without javascript. Iuno. I'm leaning towards cluttering the html but I'd like to hear if there are some opinions on this.

Answer 1

Internet Explorer (IE) doesn't support the :after selector, we must use some hack instead, for example this one:

li { scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + 'xkcd150') : ''); }

"xkcd150" - this one will be added after each <li>.

its an expression, which usually used to replace and fix some IE bugs.

So, the full code is:

li { scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + ' / ') : ''); }

li.last {
scrollbar-face-color: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + '') : ''); }

The first lines adds " / ", and the second is used to add nothing.

All the code must be added into your css file.

Answer 2

Try using something like jQuery.

`$(function(){

$('li').not(':last-child').append('\'');

});`

It doesn't clutter up the html. Also, to make this only work with IE, try using jquery compatibility.