[csswg-drafts] [css-pseudo] generated content between elements (#4709)

tylersticka has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-pseudo] generated content between elements ==
We currently have and enjoy `::before` and `::after` [tree-abiding generated content pseudo elements](https://drafts.csswg.org/css-pseudo-4/#generated-content).

One use for these is to generate content _between_ elements. For example, you could insert separators between a list of breadcrumb navigation segments:

```css
.breadcrumbs > * + *::before {
  content: "▸";
  margin: 0 2ch;
}
```

Despite this, I still see hard-coded separators in HTML (vertical bars, bullet or dot characters, etc.) for these sorts of patterns quite often. I have a few thoughts about why this might be:

- Simple lack of familiarity with or access to a project's CSS.
- Adjacent element selectors (or other techniques like `:not(:first-child)`) can be intimidating to some developers.
- There can sometimes be complexity involved in styling a child pseudo element to appear visually as if it's between its parent and adjacent aunt or uncle.

This made me wonder if there'd be value in a pseudo element that injects content _between_ adjacent matching elements?

```css
.breadcrumbs > *::between {
  content: "▸";
  margin: 0 2ch;
}
```

![Illustration of a breadcrumb navigation pattern with symbols inserted between adjacent elements](https://user-images.githubusercontent.com/69633/73293385-a9655600-41b8-11ea-9fb3-24dd21fbe2f9.png)

(I was [encouraged to submit this issue](https://twitter.com/fantasai/status/1220851780357148674) after [writing about the idea](https://cloudfour.com/thinks/some-imaginary-css/#pseudo-elements-between-siblings).)

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4709 using your GitHub account

Received on Tuesday, 28 January 2020 18:27:44 UTC