Cross-Browser ::before and ::after pseudo-class polyfill

gistfile1.css

/* =============================================================================
    CSS Declarations
   ========================================================================== */

/* ==|== The Standard Way =================================================== */

.foo::before {
  /* ...css rules... */
}

.foo::after{
  /* ...css rules... */
}


/* ==|== The IE Way =================================================== */
/* NOTE: a comma separated IE & Standard rule won't work.               *
 * IE doesn't understand ::before or ::after & ignores the declaration  */

.lt-ie9 .foo:before,
.lt-ie8 .foo .ie-before {
  /* ...css rules... */
}

.lt-ie9 .foo:after,
.lt-ie8 .foo .ie-after {
  /* ...css rules... */
}


/* =============================================================================
    IE6 & IE7 polyfills
   ========================================================================== */

/* ==|== ::before polyfill ================================================== */

.lt-ie8 .foo {
  /* creates <i class="ie-before"></i> */
  zoom: expression( this.runtimeStyle.zoom="1", this.insertBefore( document.createElement("i"), this.firstChild ).className="ie-before" );
}

/* ==|== ::after polyfill =================================================== */
.lt-ie8 .foo {
  /* creates <i class="ie-after"></i> */
  zoom: expression( this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i") ).className="ie-after" );
}