I used to do an entire talk<\/a> on pseudo elements. One of the things I mentioned was that there used to be a CSS3 spec that included “multiple” pseudo elements, but it was removed. That was kind of a bummer, because sometimes just ::before<\/code> and ::after<\/code> aren’t enough. Why the seemingly arbitrary limitation? <\/p>\n

Now Alan Stearns from Adobe is heading up a new draft for the CSSWG for getting this added back to the spec (and make it work in browsers). He needs some help! He needs visual use cases on why designers want this.<\/p>\n

One example I thought of right away was the speech bubble thing<\/a>. The speech bubble arrow can be made from a pseudo element, but what if you need those pseudo elements for other things? For instance, a blockquote might have opening and closing quotes around it.<\/p>\n

<\/figure>\n

Or you might need to use the clearfix<\/a> on it if it’s possible there are floated elements inside. The clearfix (usually) uses both available pseudo elements on an element.<\/p>\n

On a larger scale, take a browse around CodePen<\/a>. There are lots of awesome examples like this one with a shooting tank<\/a>. A lot of those style demos are built from a big set of HTML elements for each part of them. Why pollute the DOM with semantic elements used for non-semantic purposes? All this stuff could be done with pseudo elements instead.<\/p>\n

So let’s have it folks! What are some use cases you’ve come across where you wanted multiple pseudo elements but didn’t have them?<\/strong> Helping Alan out with this helps move the web forward.<\/p>\n","protected":false},"excerpt":{"rendered":"

I used to do an entire talk on pseudo elements. One of the things I mentioned was that there used […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[],"class_list":["post-17605","post","type-post","status-publish","format-standard","hentry","category-articles"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":375144,"url":"https:\/\/css-tricks.com\/taming-the-cascade-with-bem-and-modern-css-selectors\/","url_meta":{"origin":17605,"position":0},"title":"Taming the Cascade With BEM and Modern CSS Selectors","author":"Liam Johnston","date":"November 21, 2022","format":false,"excerpt":"BEM. Like seemingly all techniques in the world of front-end development, writing CSS in a BEM format can be polarizing. But it is \u2013 at least in my Twitter bubble \u2013 one of the better-liked CSS methodologies. Personally, I think BEM is good, and I think you should use it.\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/is-where-funnels.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/is-where-funnels.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/is-where-funnels.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/is-where-funnels.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/is-where-funnels.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":308234,"url":"https:\/\/css-tricks.com\/pseudo-elements-in-the-web-animations-api\/","url_meta":{"origin":17605,"position":1},"title":"Pseudo-elements in the Web Animations API","author":"Chris Coyier","date":"May 13, 2020","format":false,"excerpt":"To use the Web Animations API (e.g. el.animate()) you need a reference to a DOM element to target. So, how do you use it on pseudo-elements, which don't really offer a direct reference? Dan Wilson covers a (newish?) part of the API itself: const logo = document.getElementById('logo'); logo.animate({ opacity: [0,\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":164669,"url":"https:\/\/css-tricks.com\/thoughts-media-queries-elements\/","url_meta":{"origin":17605,"position":2},"title":"Thoughts on Media Queries for Elements","author":"Chris Coyier","date":"March 4, 2014","format":false,"excerpt":"Imagine something like these Transformer Tabs as a widget in a fluid column in a responsive design. Depending on the browser window width, perhaps this design is either 4, 2, or 1 column wide. When it breaks from 4 to 2, the column probably temporarily gets wider than it was,\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":384331,"url":"https:\/\/css-tricks.com\/keeping-the-page-interactive-while-a-view-transition-is-running\/","url_meta":{"origin":17605,"position":3},"title":"Keeping the page interactive while a View Transition is running","author":"Geoff Graham","date":"January 31, 2025","format":false,"excerpt":"When using View Transitions you\u2019ll notice the page becomes unresponsive to clicks while a View Transition is running. [...] This happens because of the\u00a0::view-transition\u00a0pseudo element \u2013 the one that contains all animated snapshots \u2013 gets overlayed on top of the document and captures all the clicks. ::view-transition \/* \ud83d\udc48 Captures\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/01\/view-transitions-page-interactivity-1120x821-1.png?fit=1120%2C821&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/01\/view-transitions-page-interactivity-1120x821-1.png?fit=1120%2C821&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/01\/view-transitions-page-interactivity-1120x821-1.png?fit=1120%2C821&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/01\/view-transitions-page-interactivity-1120x821-1.png?fit=1120%2C821&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/01\/view-transitions-page-interactivity-1120x821-1.png?fit=1120%2C821&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":339586,"url":"https:\/\/css-tricks.com\/custom-state-pseudo-classes-in-chrome\/","url_meta":{"origin":17605,"position":4},"title":"Custom State Pseudo-Classes in Chrome","author":"\u0160ime Vidas","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 "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"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,"srcset":"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 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-custom-pseudo-class-state.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-custom-pseudo-class-state.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-custom-pseudo-class-state.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":366252,"url":"https:\/\/css-tricks.com\/conditionally-styling-selected-elements-in-a-grid-container\/","url_meta":{"origin":17605,"position":5},"title":"Conditionally Styling Selected Elements in a Grid Container","author":"Preethi","date":"June 15, 2022","format":false,"excerpt":"Calendars, shopping carts, galleries, file explorers, and online libraries are some situations where selectable items are shown in grids (i.e. square lattices). You know, even those security checks that ask you to select all images with crosswalks or whatever. \ud83e\uddd0 I found a neat way to display selectable options in\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_C6C1FBE60A3624B876B34697BF3BE9266CAA9E9CFB20B11CDBDE5D32FDF0FD18_1654436553993_diagram-1.png?fit=1200%2C877&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_C6C1FBE60A3624B876B34697BF3BE9266CAA9E9CFB20B11CDBDE5D32FDF0FD18_1654436553993_diagram-1.png?fit=1200%2C877&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_C6C1FBE60A3624B876B34697BF3BE9266CAA9E9CFB20B11CDBDE5D32FDF0FD18_1654436553993_diagram-1.png?fit=1200%2C877&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_C6C1FBE60A3624B876B34697BF3BE9266CAA9E9CFB20B11CDBDE5D32FDF0FD18_1654436553993_diagram-1.png?fit=1200%2C877&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/s_C6C1FBE60A3624B876B34697BF3BE9266CAA9E9CFB20B11CDBDE5D32FDF0FD18_1654436553993_diagram-1.png?fit=1200%2C877&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=17605"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17605\/revisions"}],"predecessor-version":[{"id":345955,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17605\/revisions\/345955"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=17605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=17605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=17605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}