Re: [csswg-drafts] Feature to define an arbitrary number of pseudo-elements (#6169)

I remember the first round of this, with ::outside(). We tried implementing it, it got out of control quite quickly.

I thought it worth reminding everyone about `content: contents` (https://drafts.csswg.org/css-content-3/#element-content). I don't know how widely implemented it is, but it can be used to move the DOM tree from an element to its pseudonode:
```css
div {
    border: 1px solid blue;
    content: none;
}
div::before {
    border: 1px solid red;
    content: contents;
}
```
This will shift the DOM subtree from the `div` to its `::after` pseudo-element - you're getting two borders around the subtree.

We've implemented this and it's fun to do things like self-captioning images:
```css
img {
    content: none;
}
img::before {
    content: contents;
}
img::after {
    content: attr(alt);
}
```

But it's a bit of a hack, and falls down quite often - if the image has a border, for example, then the caption wil too.

What we find ourselves wanting is a _sibling_ pseudo-element, which creates a sibling to the current node. And in fact we effectively have one of these proposed in CSS already: https://drafts.csswg.org/css-gcpm/#footnote-call, but it's limited to footnotes.

Footnotes are content positioned out of normal flow, but a marker is left in the box tree where it was moved from. The way we implement this is to create a sibling pseudo-element before the positioned content. It's so useful, I don't get why it's restricted to footnotes:
* floating content to a footnote
* floating content to a sidenote on page with `position: running(nnn)`
* floating content to the top of the next column, currently being pondered in https://drafts.csswg.org/css-page-floats/
* floating content to another region, if css-regions ever comes back
* content that's floated with a regular `float: left`, but that winds up on the next page due to fragmentation.

In all these cases you might want to leave a note(*) in the paragraph referering to that content somehow, but you can't do this with a ::before or ::after on the floated content, because that would be moved with the content. Being able to do something like this:
```css
figure {
    float: right;
    counter-increment: figure;
}
figure::call {
    content: "Figure " counter(figure) ": " attr(title);
}
```
would open up all sorts of possibilities, particularly when combined with `content: contents`.


-- 
GitHub Notification of comment by faceless2
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6169#issuecomment-812846696 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 3 April 2021 10:33:40 UTC