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

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

/* =============================================================================
    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
   ========================================================================== */

.lt-ie8 .foo {
  zoom: expression(
    this.runtimeStyle.zoom="1",

    /* ::before polyfill - creates <i class="ie-before"></i> */
    this.insertBefore( document.createElement("i"), this.firstChild ).className="ie-before",

    /* ::after polyfill - creates <i class="ie-after"></i> */
    this.appendChild( document.createElement("i") ).className="ie-after"
  );
}