Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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"
);
}
@corydorning

This comment has been minimized.

Copy link
Owner Author

@corydorning corydorning commented Apr 11, 2012

This assumes the use of HTML tag classes such as this:

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
@barryvdh

This comment has been minimized.

Copy link

@barryvdh barryvdh commented May 4, 2012

Is the content property supported in IE7? According to this not: http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx#generated
It does indeed create an element, but my content is not displayed..

@corydorning

This comment has been minimized.

Copy link
Owner Author

@corydorning corydorning commented May 8, 2012

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!

@emkamal

This comment has been minimized.

Copy link

@emkamal emkamal commented Jun 5, 2012

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?

@corydorning

This comment has been minimized.

Copy link
Owner Author

@corydorning corydorning commented Jun 7, 2012

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.

@corydorning

This comment has been minimized.

Copy link
Owner Author

@corydorning corydorning commented Jun 7, 2012

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.

@CrocoDillon

This comment has been minimized.

Copy link

@CrocoDillon CrocoDillon commented Jan 22, 2013

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.

@CrocoDillon

This comment has been minimized.

Copy link

@CrocoDillon CrocoDillon commented Jan 22, 2013

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!

@kapitancho

This comment has been minimized.

Copy link

@kapitancho kapitancho commented Mar 6, 2013

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

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

@corydorning

This comment has been minimized.

Copy link
Owner Author

@corydorning corydorning commented Mar 26, 2013

@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.
@corydorning

This comment has been minimized.

Copy link
Owner Author

@corydorning corydorning commented Mar 26, 2013

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.