I used to do an entire talk 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 and ::after aren’t enough. Why the seemingly arbitrary limitation?
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.
One example I thought of right away was the speech bubble thing. 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.
Or you might need to use the clearfix on it if it’s possible there are floated elements inside. The clearfix (usually) uses both available pseudo elements on an element.
On a larger scale, take a browse around CodePen. There are lots of awesome examples like this one with a shooting tank. 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.
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? Helping Alan out with this helps move the web forward.
A few more ideas I’m running with:
Even more extra backgrounds and borders a la Nicolas Gallagher.
More than one stylesheet adding ::before and ::after content without clobbering each other.
Generating boxes in CSS to use in a region chain.
Having more :before and :after pseudo elements is sometimes useful, but what would really be amazing a wrapper pseudo element. I would allow hacks like “uncle dave’s box” to be made with one element instead of 2 (sometimes even 3).
Blockquotes should have paragraphs in them, so you could target the first and last paragraphs for the quotes and still use the pseudo elements on the blockquote ;-)
But I think it would be nice if you could chain pseudo elements, like:
.some-class:before:before
Although that would get a little messy I guess ;-)
Could also allow complex css animations without 100 divs.
It would be very useful for people who work on css, but that aren’t allowed to modify the html.
Personally 1 in 2 of my websites have non-semantic divs in them… and I think all of them have superfluous tags like a link inside a li tag, or a p inside an article…
It kindof annoys me sometimes.
This is something I’ve always wondered about. Perhaps setting it like this would work? It seems like a good way to do it, because multiple elements could call upon the same predefined pseudo element.
This looks like a really mature solution I could definitely work with. It would be so much more scalable than chaining pseudo elements (on a side note you’d totally get mixed up with ::before::after and ::after::before) or making ::more up. It also fits in with the sass syntax you’d get by embedding pseudo elements as we are now.
I can already imagine the support threads: “No, ::after comes before ::after::after, and ::before::before comes before ::before… not after!
Strangely enough I was monkeying with a circle today that did some folding panel business using :before and :after and I was all like…
Pseudo Example
http://codepen.io/grayghostvisuals/full/EneAo
Would be awesome if this gets added to the spec.
Also, how about ::outer-before and ::outer-after for “replaced elements”.
I would love to be able to make a 3D cube using a single element. I have been able to create something that is pretty close (http://codepen.io/joshnh/pen/FCJGI), but the rotations are limited, as it is really only the front three panels!
What would make more sense is:
I’d like to extend Corey’s method to behave like :nth-child selectors.
E.g., ::before(2), ::before(2n+1)
Not sure how you would specify how many existed though. Perhaps as a property?
element{ margin:0; before:6; after:2; }
But this way you could open all kinds of possibilities for CSS to replace images and/or extra elements.
Excatly my idea! Even include something like
::before(even)or::before(-1)To specify even/odd and count backwards from the end, or even something like:first-line::after(2).I want to see a pseudo-element :bad-ass in the spec. I don’t care what is does, I just want to see that in the spec.
A common use case for me is having a bordered box with a bordered arrow… which is accomplished by having a smaller
:afterarrow sitting on top of a slightly larger:beforearrow to give the appearance of the border. However, this ties up both of the pseudo elements.I have gotten in the practice of realizing these situations while I am building DOM and going ahead and coding up an inner-wrap element for all my other potential pseudo-element needs. I know it’s not exactly semantic… but consistency and future flexibility trumps semantics for me
:(.I like the way you present new introductions Chris. Use these pseudo classes while styling blockquotes and pictogram nav.
That’s my tank ! But I have to agree, it sucks that I had to use many elements to such a purpose.
Actually, I came to a point where I don’t even take the time to think about how could I use pseudo-elements to reduce the number of elements in the DOM when I use more than one or two elements in it. It doesn’t worth it, or not on CodePen demo’s at least.
Long time since I wanted multiple pseudo-elements to build some absolutly non-semantic things (such as a shooting tank crossing the screen). Something like #element:before:after:before:before… or better #element:pseudo(N).
I really like your idea of combining ::after and ::before into a single pseudo-element like ::pseudo(x). I think the names ‘before’ and ‘after’ are acting as arbitrary semantic limitations due to their real world associations. It’s harder to argue the case that you need multiple pseudo elements if a physical object normally only has a single back and front. The current spec is inadvertently applying a flawed analogy to HTML elements.
:)
Make a site logo with just an anchor element:
<a id="logo" href="/">My Site!</a>Although, I think there’s one thing I desire. Even if we can’t make multiple pseudo-elements, but at least I hope they can be compared with the original element: Selectable, and Transitionable (transitionable as well as on Firefox) :\
You can make a image hover effect without additional markup (a.img-sprite-hover-fade:hover:after):
http://jsfiddle.net/mbDAF/
Sadly CSS-Transitions dont work in current browser versions on generated content..
Hmm it looks like a really nice addition to the CSS specs, but what I do not understand is that you are asking us for examples to make de W3C working group consider this spec.
Because if it’s a very wanted CSS spec, why do you need to ask us for examples? There must be tons of them, if people really wanted to use them, but the couldn’t.
Off course the won’t be visible, because these pseudo classes aren’t available for now, but if they’re really wanted you would not even have to ask it, because the examples are just there.
Back to the article, the spec does look very cool. I really like the approach of @corey (just like you’d also mentioned in your presentation). I like the way Nicolas used the pseudo classes, to build GUI elements (http://nicolasgallagher.com/pure-css-gui-icons/).
The pseudo classes are also very nice for adding really nice shadows to your elements. (http://jsfiddle.net/savver/wXKbc/embedded/result/).
This really does make sense, especially for visual content that is purely CSS-based. I always feel that I’m adding pointless content to the DOM just to evade pseudo CSS limitations…especially when it’s something as simple as showing an extra bit of visual material that has no interaction.
I totally support the ideas raised by Corey (index numbers for multiple before/after selectors) and Alex Kempton (multiple custom-named before/after selectors that are pre-defined).
The method that seems most appropriate would be Alex’s, and it makes a lot of sense considering there are already things in the CSS standard that use custom names, eg. CSS animations.
Also here’s something that it would be useful for:
A speech bubble with quotes, the arrow and also static icons floating over the top corner if the message is pinned (or faved, popular, important, etc).
That way one can simply use this HTML:
Combined with this CSS:
Or the other CSS method, mentioned by Alex:
Instead of having more in the DOM like this...
I really dig the indexing example. Makes a ton of sense and I even feel like I’m actually using something similar to multiple
background-imagesand the:nth-childpropertiesI still don’t understand this whole double colon thing going on? What is this?
Although not required, the spec says the double colon is the “proper” way to denote psuedo-elements.
It would be interesting if an ::inbetween existed, selecting the space between the children of the selected element
ul::inbetween{ content: ‘|’ ; }
Would turn a list into
<ul><li>…</li>|<li>…</li>|<li>…</li></ul>
Instead of using content, it would of course be possible to make small blocks, images, and so on, to use as separation between a set of elements (articles, menu items, form elements, etc)
maybe two different functions of (something like) ::content-before/after and ::display-before/after, just to separate simple things like the blockquote example above.
Hmmm…. demo this http://codepen.io/aaronkahlhamer/pen/dnLfF (FYI: The styling isn’t perfect. )
I’m thinking this is what I could have done if I had multiple pseudo elements at my disposal.
Hmmm…. demo this http://codepen.io/aaronkahlhamer/pen/dnLfF (FYI: The styling isn’t perfect. )
I’m thinking this is what I could have done if I had multiple pseudo elements at my disposal.
<label>Name: <a href=”#” id=”clickme” class=”a few classes here to mange the styles”>Edit<input type=”input” name=”pwd” value=”enter first name” /></li></ul></label>
I think some of the use cases will eventually end up being handled by Web Components instead…but maybe not all of them.
What about something like this:
In this case, we are assigning a specific ID (or CLASS, if you want to) to the initial pseudo-element. You can then assign a new pseudo to your original pseudo element.
Technically, with this type of syntax, CSS could write an entire HTML document with only a tag.
The last line should end
‘… could write an entire HTML document with only a BODY tag.’
Making text automaticly to links:
I have done it now with jQuery:
With CSS:
This does not appear to work with regular CSS, what are you trying to do?
Yahhh adding HTML through pseudo elements isn’t likely to happen. That’s crossing the streams too far I think.
Plus, I don’t think this would be both useful and rational.
http://we-are-gurus.com/labs/css3/css3-3d-block-minecraft.html
This is a small cube done with ::pseudo and of course, that would be awesome to create the missing 3 faces via pseudo elements too!
A CSS “loading” or “spinner” icon using a single html element (assuming better support for animating pseudo elements)
Dabblet Example (using multiple divs instead): http://dabblet.com/gist/3205691
I wanted to build a stack of photos representing an album. i could only get three piled photos: the ::before the ::after and the element itself.
like chuck neely said, animation on pseudo elements is also an issue. i also had this spinner problem.
Yep, same stack of photos use here. I used the
::beforefor the extra photo border but::afterwas already used up by a clearfix.Were pseudo-elements actually intended for the reason we like them so much now? I always assumed that using them as styling hooks was somewhat of a workaround rather than intended behavior (which goes a long way explaining why there are only two).
I too have sometimes wished we had more than two pseudo-elements (usually to do with icons, triangles and clearfixes all defined on one single element), though these cases are rare and I wonder if we’re not overusing this (admittedly very useful) workaround, instead forgetting more conventional styling means (like multiple backgrounds)?
Yeah, I agree; I made a similar comment when using pseudo-elements for icon fonts.
Here’s an example where I could use some extra pseudo-elements, so I don’t have to use an extra
spantag.I don’t know if we need more boxes or a way to divide boxes in smaller chuncks. Anyway, I think the region spec is the most amazing use case source for this.
BTW, I use the ::slot() notation in those samples:
This is also solving cases like the speech bubble:
From what I saw here
::between-elementsseemed nice to me.The advantage of using a CSS property and not a pseudo-element is that as soon as the CSS WG find out a solution to allow multiple stylesheet to add elements to a list-valued property without clearing the one added somewhere else in the stylesheet we’ll have the possibility to add slots to content() without worrying about using an unique index (::after(1),::after(2)…) for each of our additions.
thank you for making writing very interesting to see and understand.
Having n amount of pseudo elements would finally make us able to separate content from style.
At the moment we all(?) add spurious nonsensical mock-up to add extra elements on a page that are purely for presentational purposes, such as:
This only has relation to the presentation of the page, not the content (so it’s just as bad as using the
fonttag!).It would be much better practice if that whole element could be moved completely to the presentational layer:
Or using code mentioned above:
It would be great to have pseudo elements that are completely divorced from the DOM. Most uses of :after and :before aren’t really what they were originally intended for. It would be good if you could create a pseudo element and then give it instructions on where it should appear in the page something like this
@pseudo-element{ content: "blah"; dom: article header .avatar; }Interesting idea Rachel. I think it would probably break away from the CSS standard if we had to put that sort of “dom” selector inside the actual properties of a pseudo element.
Based on how most CSS selectors work, as well as the ideas being presented here so far, I’d probably go for this solution:
This would then allow us to use the pseudo element called "article_avatar" in places other than just "article header .avatar",
plus it's simple and clean :)
Another use case I’ve come a cross is when you want to display the cite attribute of a quote in a style different from the closing quote. I put together a pen to illustrate.
In addition I’d see great help in more pseudo-elements when working with sprites!
That being said, there are a lot of creative ideas in this discussion. Personally I’d like to keep this as simple as possible. CSS3 introduced double quotes for pseudo elements. What about freely naming pseudo elements to our own preference, just like IDs and classes?
Then you’d easily solve the initial “speech bubble thing” adding either
(1) a second ::after element:
(2) a chained ::after element:
(3) a custom chained element:
…or (4) a completely stand alone element:
What I’d really love is to be able to see pseudo-elements in the DevTools DOM inspector in Firefox/Chrome like how it’s done in Dragonfly on Opera!
Seems like someone has already asked for this feature in Chrome DevTools
http://code.google.com/p/chromium/issues/detail?id=123343&q=feature%3DDevTools%20pseudo&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20OS%20Area%20Feature%20Status%20Owner%20Summary
I’m not familiar with Dragonfly’s dev tools, but you can see pseudo-elements in Chrome Dev Tools. They appear under the ‘Matched CSS Rules’ in the Styles pane of the Elements tab. You may not have scrolled down enough to see them.
Hey Shaun,
I know you can see them in the CSS Styles panel but you can’t see them visually in the DOM Inspector. See this screenshot of a pseudo element in Dragonfly http://i.imgur.com/khceh.png . Notice the <::after> element inside the h2.
I could totally see countless benefits to multiple pseudo-elements. One example I happened across recently was in an attempt to create a folder tab like button with pure CSS. The type of tab that has an “S” curve on either side. I was easily able to create one side of it with a before and after. One was used as a mask type layer with a border radius and the other filled the gap in between the mask and the actual element. With just one more pseudo-element I would have been able to mask the other side and achieve a perfect folder tab button with pure CSS. Unfortunately, I had to settle for right justifying the tab and only having an “S” curve on one side :(
Did you ever think of creating divs within the content: “” that could have their own pseudo :before?
Creating actual elements with the content attribute would probably be crossing streams again, as it’s effecting a little too much in the DOM than just good ol’ pseudo elements with text added through an attribute.
this is an interesting idea. by adding the selector for the div to the style you would effectively create an infinite loop. this cant possibly work though. i’ll have to try it. trying to think of a practical use for this hurts my brain.
I’d prefer the ::after::after syntax as for me it makes more sense.
One of the possible usage I ran into is
which would totally make sense in a basic CSS layout, yet achievable only in JavaScript at the moment.
While we’re at it, let’s bring back the ::outside psuedo wrapper as well, which already has a proposed means of multiples (with a syntax in the form of ::outside(2)/::outside(3) etc). Not that I’m tied to this paren-numbered syntax for the multiples format, but it works—it’s sensible, clean and allows us to give semantic order/organization to the multiple pseudo elements, whether they be ::outside or ::before or ::after or ::whathaveyou and would be slightly cleaner (less code) than the syntax format derylius described (::after::after) though you’d think the latter would already exist and work.
Anyway, this idea was proposed in the 2003 CSS3 Working Draft:
http://www.w3.org/TR/css3-content/#wrapping
Guessing William Malo didn’t know that this had already been spec’d, but I’m glad to see I’m not the only one who wants this or had thought of this! Another use case to add to those that Mr. Malo mentioned:
‘twould make vertical centering simpler without the use of extra non-semantic elements (hate em!). Or the powers that be could just allow vertical-align: middle to work for divs. That’d be great, too.
In any case, here’s to reducing the non-semantic pollution in our HTML waters!
What’s the status on this? More pseudo elements to css would be like having hovercars in real life.
In my case, I needed to have a speech bubble, but with a double outline. That could work very easily with one additional ::before / ::after pseudoelement.
I’d love to use multiple pseudo elements to create (more) complex loading animations. That way I could just add a
loadingclass on the component of my UI that is waiting for data and have everything else in the stylesheet.Seph Coster wrote in: