Browser Support for :before/:after Pseudo Elements
Published by Chris Coyier
I'm going to be giving some talks this summer regarding pseudo elements and all the neat things you can do with them. One of the cool things about them is that the browser support is actually pretty good - much better than some CSS3 stuff. And in fact, you can replicate some CSS3 stuff with them (like multiple backgrounds, kinda)
I wanted to make a browser compatibility chart so it's very clear exactly what kind of support you'll get if you use the pseudo elements :before and :after. My research was mostly based on this quick demo page. I viewed that page in browsers I can run myself, ran it through BrowserShots, and last case scenario, looked up documentation on older browsers.
|3.5 and up||
Bonus: Firefox 4 can transition them
|3.0 and down||
Does not support positioning or floating on the elements.
Tested: 4 and up
Apparently: 1.3 and up
|6 (docs) and up||Supported|
|9 and up||Supported|
z-index not respected, must use a doctype, must declare a :hover state if you use :hover:after/:hover:before
|7 and down||Unsupported|
Let's take three different sources of data. The percentages listed are calculated (June 2011) from the last month of visitors by adding up the percentage of visitors from each version of each browser where pseudo elements are supported.
|W3Schools Browser Usage Data||91.9%|
|CSS-Tricks (via my Google Analytics)||97%||StatCounter||84.8%|
If anyone has access to older browsers and can do testing, that'd be awesome.
- I only have proof of Safari 4+ working, but saw documentation of 1.3+ supporting them.
- I only have proof of Opera 7+ working, but saw documentation of 6 supporting them. Might go back even further.
- Any other quirks not yet mentioned...