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.
- Host: GitHub
- URL: https://github.com/kevindees/ie7_pseudo_elements
- Owner: kevindees
- Created: 2011-09-13T06:55:23.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2012-12-19T21:04:41.000Z (over 12 years ago)
- Last Synced: 2024-10-19T22:06:51.617Z (8 months ago)
- Language: JavaScript
- Homepage: kevindees.cc
- Size: 264 KB
- Stars: 15
- Watchers: 1
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
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>