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"
  );
}

Per @CrocoDillon comment (https://gist.github.com/corydorning/2362483#comment-742079), I've update the Gist to include the ::before and ::after polyfill in the same rule.

Simply remove whichever portion of the expression you don't need, if you don't need both.

---

I included them as separate rules initially so it was easier to just delete the entire rule you didn't need. However, I didn't consider the need for using both, so thanks for pointing this out.