Browser Support for :before/:after Pseudo Elements

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.

Firefox 3.5 and up Supported
Bonus: Firefox 4 can transition them
3.0 and down Partial Support
Does not support positioning or floating on the elements.
Safari Tested: 4 and up
Apparently: 1.3 and up
Supported
Chrome All versions Supported
Opera 6 (docs) and up Supported
Internet Explorer 9 and up Supported
8 Partial Support
z-index not respected, must use a doctype, must declare a :hover state if you use :hover:after/:hover:before
7 and down Unsupported

Support Levels

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%

Needs updating...

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