[CSS Gap Decorations] Consider using pseudo elements?

[spoike]

Hi, did you consider controlling the gap decorations with pseudo elements? It would be a generic approach and is close to how ::after and ::before works, and it could work both for flexbox and grid. It would also let you do things like breadcrumb trails and borders with a graphic in them.

Here is a CSS sketch of a breadcrumb trail that lets you insert a character or image (with content) in the gap between breadcrumb items.

ol.breadcrumbs {
  display: flex;
  flex-direction: row;
  gap: 3ch;
}
ol.breadcrumbs::gap-main-axis {
  height: 1em;
  width: 1ch;
  content: ">";
}
ol.breadcrumbs > li {
  display: inline-flex;
}

<ol class="breadcrumbs"><li>One</li><li>Two</li></ol>
-> Would render "One > Two"

Here is a CSS sketch where you define a border with an image handle inside the gap.

.grid {
  display: grid;
  grid-template: auto / auto;
}
.grid::gap-col {
  display: flex;
  align-items: center;
  height: 50%;
  width: 1px;
  background-color: 
  content: url("column-gap-image.png");
}
.grid::gap-row {
  display: flex;
  align-items: center;
  width: 50%;
  height: 1px;
  background-color: black;
  content: url("row-gap-image.png");  
}

That's my two cents.

[chriskirknielsen]

Placing content in a gap seems tricky: gaps should be a fixed size, so inserting content might make their size unpredictable. It'd be a nice option for sure, but I could imagine that could get out of hand to lay out for browsers (but I am not a browser engineer!).

On the topic, sharing this post by Eric Meyer which touches on (kind of) the same idea of using pseudos: https://meyerweb.com/eric/thoughts/2025/01/08/css-wish-list-2025/#grid-track-and-gap-styles

Pushing that further, something like .grid::nth-gap(1 of row) { gap-rule: 2px solid red; } would be neat but I don't currently have good use cases besides something like adding a special rule after the first row (to create a sort of document header).

[kbabbitt]

Thanks for the feedback!

As @chriskirknielsen alludes to, the drawback of using pseudos is that it adds a disproportionate amount of complexity in both computation and storage costs. I added a section to the explainer with more detail: Alternative 2: Using pseudo-elements

For the use cases raised in this discussion:

1. Applying the content property to gaps to produce breadcrumbs: My thought is that breadcrumbs are better implemented as real flex items rather than gap decorations. The biggest reason is accessibility: Tools like screen readers and built-in browser affordances like tooltips and focus rectangles are more likely to Just Work if breadcrumbs are real items.
2. Images in gap decorations: As noted in [CSS Gap Decorations] support gradients and images as alternative to solid colors #984, this is something we're interested in exploring in a future version of the spec. It's currently listed in the explainer as a non-goal for level 1, but I'll add it to Future Ideas.
3. Special rule after the first row: The full-power idea for this is gap decoration areas which I'd like to explore in a future level. But even in level 1, if you want only a red rule after the first row of a grid, that's achievable with row-rule: 2px solid red, repeat(auto, none);

[kbabbitt]

I've updated the explainer to clarify that "Images in Gap Decorations" is on the radar as a Future Idea. Thanks again for the feedback!