Richard Parnaby-King

Pseudo classes :before and :after in IE6-7

The pseudo classes :before and :after are CSS selectors that allow developers to prepend and append content and/or extra styling to elements. Unfortunately, these selectors are not available in Internet Explorer versions 6 and 7. There are a number of javascript fixes that will force IE6 and IE7 to enable the pseudo classes (such as https://code.google.com/p/ie7-js/), however these can be slow to download and, with the crappy JavaScript engines these browsers have, be slow to implement the fixes required to make them compliant browsers.

Fortunately, there is an alternative.

Solution

An alternative is to use the following in your css file.
[css]
.selector {
*zoom: expression(
this.runtimeStyle.zoom=”1″,
this.appendChild( document.createElement(“small”) ).className=”after”,
this.insertBefore( document.createElement(“small”), this.firstChild ).className=”before”
);
}

.selector .after, /* IE6/7 */
.selector:after {
/* styling here */
}

.selector .before,
.selector:before {
/* styling here */
}
[/css]

This method is faster than downloading a separate javascript file which then has to implement every ie6/7 fix to make it a compliant browser.

The selectors can be maintained in the same css file (does not need to be placed in separate ie-only css file) and all the code can be grouped together.