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