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

I've combined my approach with this zoom+expression+runtimeStyle solution and the result can be seen here:

https://gist.github.com/kapitancho/5099504

@CrocoDillon The single colon method is supported as you suggest. However, for me personally, I include the actual standard base rule for 2 reasons:

1. Future browser versions may deprecate support for the single colon method and require the double colon.
2. As I decide not to support older browsers for sites, it's easy to go through and clean up my CSS file by simply removing the polyfills added to support these browsers, as they are all in their own rule.

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.