Grow your CSS skills. Land your dream job.

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.

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

Comments

  1. Carlos

    What’s the difference between :before / :after and ::before / ::after?

    I don’t know where the heck I got the double colon from, but it still works fine on my sites. I already changed my code to the standard :before and :after, but I’m curious as to why it didn’t blow up in my face before.

    • Good question.

      Double-colon is the official way to do it. It’s to distinguish pseudo elements from pseudo selectors. Like when you are adding something to the page that isn’t already there, or selecting something that isn’t a “real” html element.

      The problem is that IE 8 (I think) just ignores double colon selectors, so you gotta use single for that to work. And all browsers ALSO support single colons, so might as well just use single.

    • Before CSS 3, single colons were used for both pseudo elements and pseudo selectors. CSS 3 differentiates between the two with the use of double and single colons. Double colons are to be used on pseudo elements, where single colons are to be used on pseudo selectors.

      Louis Lazaris has a great article about use of double and single colons. http://www.impressivewebs.com/before-after-css3/
      If you read the comments on that article, Stephen posted a nice example of the difference between pseudo elements, and pseudo selectors also.

      I’ve been looking into pseudo elements a lot more lately and this chart is a great find!

      You guys may be interested in this jQuery plug-in by Luke Lutman that is supposed to “support” :before and :after in IE.
      I havnt tested it out but so I can’t vouch for it but maybe this will patch up use in IE 7.

      IE7 is really the only thing that holds me back from using pseudo elements in commercial sites.

      Im curious if anyone has any suggestions for graceful degradation for pseudo elements in IE 7?

    • Carlos

      Ha! So I had it right with the double colons, I’ll change it back then. Thanks for the comments guys.

    • Scott

      I don’t understand why the double colon format even exists. Why do we *need* to distinguish between pseudo-elements and pseudo-selectors?

  2. Just curious… why do we need testing for such old browsers? Is anyone really using Safari 1.0?

    • Probably not, but I really like to get in the habit of being VERY SPECIFIC about what browser support for things is. When you write a blog post or speak about something and just go around saying “works in modern browsers”, that doesn’t serve us very well.

      Yeah, Opera can do gradients now, but only linear, and only since very specifically 11.10, and only with a vendor prefix. That’s a lot of insider knowledge kinda stuff that web designers should be aware of and keeping up to date on.

      It makes for a more timeless resource as well. Next time you need to know the browser support on pseudo elements, where ya gonna go? =)

  3. I’m glad that there’s great support for these pseudo elements, as I already use them in my sites for some great effects.

    One way I use them is as an image rollover.
    I have several images of the same size that are wrapped in anchor tags. Then i target the anchor tag with:

    a:hover:after

    The every image has a rollover of a transparent image with some text.

  4. Not that it needs to be said, but “F*** you IE7!” Keepin’ me from using these :(

  5. Pat

    Great round-up! Does anyone know if there’s a way to see the content generated by the pseudo elements in firebug/developer tools etc? I got caught out the other day by an issue with someone else’s code and couldn’t figure out where some content was coming from. It turned out to be a pseudo element.

    • With developer tools (webkit) if you select the element that they are a part of, you can see and alter the CSS for them. But you can’t select the pseudo element directly. All the dev tools projects are aware of this kinda-bug.

  6. Paul

    Hmm, never noticed that IE7 doesn’t support them.

    Fortunately, I’ve only ever used them for a relatively minor site but for the sake of giving IE7 users a decent looking site (I simply used before/after pseudo-elements to add top and bottom graphics to a couple of side panels), it looks like I’ll have to give them a nice back-up.

  7. To be a little pedantic (because I get it wrong all the time, myself), I think, technically, : is a pseudo class, and :: is a pseudo element.

    But yeah…who cares. haha. Bookmarked.

    • Yeah I mentioned that above a little bit. Basically I advocate using single colons because all browsers support that and some (IE 8) ONLY support that.

  8. Oscar Godson

    Firefox 4.0 in Windows and Linux has a bug with :before and :after, so as of now its only partially supported.

    https://bugzilla.mozilla.org/show_bug.cgi?id=646053

  9. Dyllon

    A cool trick that I use :before and :after for is for facebook to tell me in more detail about when an update was posted…

    abbr.timestamp:before { content: attr(title) ” [“; }
    abbr.timestamp:after { content:”]”; }

  10. WoW Chris, this chart came in handy. Just bookmarked it. Now sharing with friends. Great, Simply Great.

  11. I was kinda surprised to find that Selectivizr doesn’t add functionality for :before and :after but have since read that this is due to DOM manipulation causing conflicts (http://bit.ly/i3liNQ)

    Does anyone know of any solutions to using :before and :after in older browsers or are we sticking to progressive enhancement for the moment?

  12. CSS3 transitions on pseudo elements only seem to work in FF4 so far…

    Here’s a quick demo animating button gloss on hover: http://j.mp/l70BVq

  13. Curious if anyone had other (better?) resources for browser usage levels? Chris you mentioned in screencast #98 that you were going to update the link on this post.

  14. http://www.quirksmode.org/css/contents.html#t15 here’s another useful chart showing support for these :: pseudo selectors.

  15. rakz
    Permalink to comment#

    How to make “:after” “:before” pseudo selector compatible with IE browser? In IE 8 its not working..

  16. Hello Chris Coyier, i am in Trouble with IE 8, i am adding :before pseudo element to an anchor all Browser’s work perfectly but not in IE8, is any other great way to sort out this issue.
    a:before{
    content: ‘+';
    background:url(‘images/bg-hover.png’) repeat left top;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    }

  17. lima_fil

    ie 9: element need to have background, or content, not just ” .

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".