Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thealscott/3349897 to your computer and use it in GitHub Desktop.
Save thealscott/3349897 to your computer and use it in GitHub Desktop.
Cross-Browser ::before and ::after pseudo-class polyfill - adapted into mixins for SCSS using modernizr
@mixin after-polyfill(){
.ie7 & {
/* creates <span class="ie-after"></span> */
zoom: expression( this.runtimeStyle.zoom="1", this.appendChild( document.createElement("span") ).className="ie-after" );
}
}
@mixin before-polyfill(){
.ie7 & {
/* creates <span class="ie-before"></span> */
zoom: expression( this.runtimeStyle.zoom="1", this.insertBefore( document.createElement("span"), this.firstChild ).className="ie-before" );
}
}
@mixin before-and-after-polyfill(){
.ie7 & {
/* creates <span class="ie-before"></span> */
zoom: expression(
this.runtimeStyle.zoom="1",
this.insertBefore( document.createElement("span"), this.firstChild ).className="ie-before",
this.appendChild( document.createElement("span") ).className="ie-after"
);
}
}
/*
USAGE
*/
div {
@include after-polyfill();
& .ie-after,
&:after {
/*CSS*/
}
}
div {
@include before-polyfill();
& .ie-before,
&:before {
/*CSS*/
}
}
div {
@include before-and-after-polyfill();
& .ie-before,
&:before {
/*CSS*/
}
& .ie-after,
&:after {
/*CSS*/
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment