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

You are correct. The content property is NOT supported in IE6 or IE7. The content property in this statement is for IE8:

.lt-ie9 .foo:before,
.lt-ie8 .foo .ie-before {
  content: '';
  ...css rules...
}

If you want to use the content property to insert content, you would have to add it to the .ie-before/.ie-after class using another mechanism (JS, more advanced CSS expression). In all honesty, the 'content' property here is kind of pointless and creates confusion so I'll remove it. But you could use other CSS properties to create any number of effects, using this method (i.e. background images, background colors, etc.)

Thanks for pointing this out!

hi, this seems great... but my test on IE 7 (browser mode on IE9) and on IE Tester show that the generated element is rendered several times

do you have any clue why is that happen?

I would advise forcing IE edge on your pages so it uses the proper document and browser modes.
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Mixing and matching may cause unexpected behavior. It's not something I have personally tested, but it is something I avoid using the rule above.

Updated the ::before polyfill for .lt-ie8 .foo to use insertBefore instead of appendChild. This eliminates the need to do any positioning in some cases.

Having both ::before and ::after on the same element like the example didn't work for me as only the last declared expression gets executed, use a single statement instead (spread over multiple lines for readability):

.lt-ie8 .foo {
    zoom: expression(
        this.runtimeStyle.zoom="1",
        this.insertBefore( document.createElement("i"), this.firstChild ).className="ie-before",
        this.appendChild( document.createElement("i") ).className="ie-after"
    );
}

I hope I'm not pointing out the obvious.

Also, to avoid duplicating too much css, it might be worth mentioning that the old one-colon notation is supported for old pseudo-elements. So I recommend sticking with:

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

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

Thanks for the polyfill!

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.