Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save adamdehaven/dea786c4ac4072ddede2 to your computer and use it in GitHub Desktop.
Save adamdehaven/dea786c4ac4072ddede2 to your computer and use it in GitHub Desktop.
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"
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment