IE7 pseudo element :before and :after CSS ployfil.
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
README.md
ie7_pseudo.js
ie7_pseudo.min.js

README.md

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!

Using

  • 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.

Example

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

Notes

Basic

  • 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)

Cons

  • You can't stack pseudo-elements yet

Pros

  • 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

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<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;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
</head>
<body>
 
<div>
<p>test</p>
</div>
 
<!--[if IE 7]>
<script type="text/javascript">
// the script goes here
</script>
<![endif]-->
</body>
</html>