An open API service indexing awesome lists of open source software.

https://github.com/kevindees/ie7_pseudo_elements

IE7 pseudo element :before and :after CSS ployfil.
https://github.com/kevindees/ie7_pseudo_elements

Last synced: about 2 months ago
JSON representation

IE7 pseudo element :before and :after CSS ployfil.

Awesome Lists containing this project

README

        

# IE7 Pseudo Elements

Created by [Kevin Dees](http://kevindees.cc)

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>