[css-pseudo] generated content between elements

[tylersticka]

We currently have and enjoy ::before and ::after tree-abiding generated content pseudo elements.

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

.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?

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

(I was encouraged to submit this issue after writing about the idea.)

[Loirooriol]

Closing as dupe of #2960