IE7 pseudo element :before and :after CSS ployfil.
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

IE7 Pseudo Elements

Created by Kevin Dees

License: none (public domain)

Because IE7 is going to be around for some time. This script was made to give us just a little pseudo-element support until IE7 goes away.

If you feel you can help with this project hit me up here or on twitter as @kevindees. Enjoy!


  • Add "> iea" or "> ieb" as a new selector after pseudo-element in your CSS rule.
  • iea is for selectors ending in :after or ::after
  • ieb is for selectors ending in :before or ::before
  • Then add the script to the bottom of your site before the </body> tag.


.more:before, .more > ieb { ... }
.more:after, .more > iea { ... }
.more:hover:after, .more:hover > iea { ... }



  • The less CSS rules you make the faster the script runs
  • This is for IE7 only! IE6 is not worth the pain.
  • Requires jQuery 1.6+ (not tested past 1.6)


  • You can't stack pseudo-elements yet


  • Content property (is supported)
  • You can use :after and :before for basic enhancement
  • You can use CSS Castcading for specificity (selector specificity should work now)
  • You can use :hover
  • You can use url() (buggy can not use '' or "" in url)

Example Site

<html lang="en-US">
<meta charset="UTF-8">
<title>My Site</title>
<style type="text/css">
.more p:before, .more p > ieb, .more p:after, .more p > iea { content: 'me'; background: #f00; width: 10px; height: 10px; display: block; }
.more p:after, .more p > iea { content: 'you'; background: #ccc; width: 15px; height: 15px; display: block;}
<script type="text/javascript" src=""></script>
<!--[if IE 7]>
<script type="text/javascript">
// the script goes here