CSS Regions allows you to flow content from one box to another in a region chain. One perennial point of discussion on that specification is just where those boxes come from. Our position is strongly inclusive – we think that you should be able to create a region chain out of any box. This could include elements in the regular DOM or Shadow DOM, boxes created from a page template, or boxes created with pseudo-elements or other CSS mechanisms. Back in the CSS Working Group meeting in Hamburg, the group agreed to explore the pseudo-element possibilities.
The initial idea is that you would use pseudo-elements in CSS to define boxes for your region chain. We decided to work on a small incremental step instead of inventing an entirely new pseudo-element for this use case. In current experimental builds of WebKit, you can already use
::after pseudo-elements as boxes in a region chain. But if you try this, you quickly run up against the limit of only two boxes per HTML element. What if you could make more? Daniel Glazman and I started working on a proposal for multiple
As we worked on the proposal, we found other use cases for breaking the limits on
::after pseudo-elements. The
::after pseudo-elements are used today in several ways. These include adding generated content, icons, more borders or backgrounds, and providing a clearfix. If you want to combine more than two of these uses today (or combine these with generating boxes for a region chain) you’re out of luck. With multiple
::after pseudo-elements you can combine as many of these uses as you wish on a single HTML element.
There are also some cases where separate pieces of generated content should receive separate styling. Think of an academic-journal-style citation. Names, titles, dates and other data needs to be ordered and formatted in a particular manner. With a single pseudo-element you can combine pieces of generated content, but they all get a single style. With multiple pseudo-elements each piece can get its own style block. This use case came up in the discussion Chris Coyier hosted on CSS-Tricks.
In order to get multiple
::after pseudo-elements in CSS, we needed ways to create, order, and access a list of each pseudo-element type. Our initial ideas ran towards a new generic mechanism in CSS that would work for any pseudo-element type. As we worked on the proposal, Razvan Caliman worked on a prototype where we could all try out each iteration of the syntax. Feedback from the prototype stage and the CSS WG has pushed us towards extending the existing
::after syntax directly. You can take a look at the current proposal for all the details, but here’s a brief summary:
Adding pseudo-elements uses what we’re calling an “ordinal” – an integer value that says where the particular pseudo-element falls in its list. You can add an ordinal after the regular
::after syntax to create a new pseudo-element at that ordinal position. An ordinal of ‘1’ is the same as the regular
::after pseudo-element, and larger ordinals move the pseudo-element farther away in the list from the host element’s content area. The ordinal positions you use do not have to be contiguous.
::before(5) ::before -or- ::before(1) //content area ::after -or- ::after(1) ::after(3)
You can also access
::after pseudo-elements by index using syntax like
::nth-last-after(). These do not create pseudo-elements, they merely access pseudo-elements already created with the ordinal syntax. In addition to a numerical index, you can also use the
an+b syntax from the ::nth-child() pseudo-class. So for the element with two
::after pseudo-elements in the example above, you could get all of the
::before pseudo elements by asking for
::nth-before(n). Or you can get the innermost
::after element by asking for
::nth-after(1). The tricky bit is that
::nth-after(2) will get the second
::after element in the list that was created with ordinal 3. The indices run from the content area outwards just as the ordinals do.
We expect some lively discussion on how this proposal can progress. Hopefully we will come to some agreement on how to extend the facilities in CSS to create more boxes (but not just for region chains). If you are interested in providing feedback for this proposal, please email email@example.com with “[css4-pseudo]” in the subject line.