{"id":9189,"date":"2011-05-04T09:29:09","date_gmt":"2011-05-04T16:29:09","guid":{"rendered":"http:\/\/css-tricks.com\/?p=9189"},"modified":"2011-06-14T18:03:19","modified_gmt":"2011-06-15T01:03:19","slug":"browser-support-pseudo-elements","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/browser-support-pseudo-elements\/","title":{"rendered":"Browser Support for :before\/:after Pseudo Elements"},"content":{"rendered":"

I’m going to be giving some talks<\/a> 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<\/a>, kinda) <\/p>\n

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<\/a>. I viewed that page in browsers I can run myself, ran it through BrowserShots<\/a>, and last case scenario, looked up documentation on older browsers.<\/p>\n\n\n\n\n\n\n\n\n\n
\n \"Firefox\"\n <\/th>\n\n 3.5 and up\n <\/td>\n\n Supported
\n Bonus: Firefox 4 can transition them<\/small>\n <\/td>\n<\/tr>\n
\n 3.0 and down\n <\/td>\n\n Partial Support
\n Does not support positioning or floating on the elements.<\/small>\n <\/td>\n<\/tr>\n
\n \"Safari\"\n <\/th>\n\n Tested: 4 and up
\n Apparently<\/a>: 1.3 and up\n <\/td>\n		\n Supported\n <\/td>\n<\/tr>\n
\n \"Chrome\"\n <\/th>\n\n All versions\n <\/td>\n\n Supported\n <\/td>\n<\/tr>\n
\n \"Opera\"\n <\/th>\n\n 6 (docs<\/a>) and up\n <\/td>\n\n Supported\n <\/td>\n<\/tr>\n
\n \"Internet\n <\/th>\n\n 9 and up\n <\/td>\n\n Supported\n <\/td>\n<\/tr>\n
\n 8\n <\/td>\n\n Partial Support
\n z-index not respected<\/a>, must use a doctype, must declare a :hover state if you use :hover:after\/:hover:before<\/small>\n <\/td>\n
\n 7 and down\n <\/td>\n\n Unsupported\n <\/td>\n<\/tr>\n<\/table>\n

Support Levels<\/h3>\n

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.<\/p>\n\n\n\n
\nW3Schools Browser Usage Data<\/a>\n<\/td>\n\n91.9%<\/strong>\n<\/td>\n<\/tr>\n
\nCSS-Tricks (via my Google Analytics<\/a>)\n<\/td>\n\n97%<\/strong>\n<\/td>\n<\/tr>\n\nStatCounter<\/a>\n<\/td>\n\n84.8%<\/strong>\n<\/td>\n<\/tr>\n<\/table>\n

Needs updating…<\/h3>\n

If anyone has access to older browsers and can do testing, that’d be awesome.<\/p>\n

    \n
  • I only have proof of Safari 4+ working, but saw documentation of 1.3+ supporting them.<\/li>\n
  • I only have proof of Opera 7+ working, but saw documentation of 6 supporting them. Might go back even further.<\/li>\n
  • Any other quirks not yet mentioned…<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

    The exact (pretty much) browser support levels for these style of pseudo elements. It’s pretty darn deep, folks, and you can do really cool things with them while keeping your markup clean.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":148360,"url":"https:\/\/css-tricks.com\/html5-progress-element\/","url_meta":{"origin":9189,"position":0},"title":"The HTML5 progress Element","date":"August 28, 2013","format":false,"excerpt":"The following is a guest post by Pankaj Parashar. Pankaj wrote to me about some pretty cool styled progress elements he created. I asked if he'd be interested in fleshing out the idea into an article about styling them in general. Thankfully, he obliged with this great article about using\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2013\/08\/firefox.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":151172,"url":"https:\/\/css-tricks.com\/custom-controls-in-html5-video-full-screen\/","url_meta":{"origin":9189,"position":1},"title":"Hiding Native HTML5 Video Controls in Full-Screen Mode","date":"September 26, 2013","format":false,"excerpt":"The following is a guest post by Sara Soueidan. I know Sara through all her excellent work on CodePen. She was working on some custom HTML5 video controls and noticed that the customizations were lost when the video went into full screen mode (example of that happening). Digging into the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":157146,"url":"https:\/\/css-tricks.com\/html5-meter-element\/","url_meta":{"origin":9189,"position":2},"title":"The HTML5 meter Element","date":"November 26, 2013","format":false,"excerpt":"The following is a guest post by Pankaj Parashar. Pankaj has written here before, last time about the progress element. Fitting indeed then to write again about the very related meter element. They are different both functionally and semantically, so read on! As defined by W3C, The meter element represents\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":339586,"url":"https:\/\/css-tricks.com\/custom-state-pseudo-classes-in-chrome\/","url_meta":{"origin":9189,"position":3},"title":"Custom State Pseudo-Classes in Chrome","date":"May 6, 2021","format":false,"excerpt":"There is an increasing number of \u201ccustom\u201d features on the web platform. We have custom properties (--my-property), custom elements (), and custom events (new CustomEvent('myEvent')). At one point, we might even get custom media queries (@media (--my-media)). But that\u2019s not all! You might have missed it because it wasn\u2019t mentioned\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-custom-pseudo-class-state.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":337505,"url":"https:\/\/css-tricks.com\/how-to-leverage-the-fullscreen-api-and-style-it\/","url_meta":{"origin":9189,"position":4},"title":"How to Leverage the Fullscreen API\u2026 and Style It","date":"April 12, 2021","format":false,"excerpt":"Let\u2019s look at the Fullscreen API in JavaScript. It allows you to do a pretty powerful thing: full screening exactly one particular element you want it to. Not only that, but CSS can help as well with a special selector. Every major browser has built-in fullscreen functionality in the form\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/fullscreen.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333984,"url":"https:\/\/css-tricks.com\/weekly-platform-news-the-not-pseudo-class-video-media-queries-clip-path-path-support\/","url_meta":{"origin":9189,"position":5},"title":"Weekly Platform News: The :not() pseudo-class, Video Media Queries, clip-path: path() Support","date":"February 5, 2021","format":false,"excerpt":"Hey, we're back with weekly updates about the browser landscape from \u0160ime Vidas. In this week's update, the CSS :not pseudo class can accept complex selectors, how to disable smooth scrolling when using \"Find on page...\" in Chrome, Safari's support for there media attribute on