4 ms·
I would create new pseudo elements: .container:gap { background-color: red; } This will allow for more fancy backgrounds (e.g. dotted or gradients) and us
by silvestrov 2y ago
I would create new pseudo elements:
.container:gap { background-color: red; }
This will allow for more fancy backgrounds (e.g. dotted or gradients) and using { padding: 2px } to set whitespace at ends of the seperator.
Possible with a :gap-horz and :gap-vert (or whatever css like to name it) to get seperate vertical and horizontal gaps.
Also: .container:gap:nth-gap(2n) { color: blue; } to get alternating colors.
- andrewingram 2y agoCame here to make the exact same comment, just being able to specify a border feels a little shortsighted.
- Permik 2y agoKnowing how CSS tries to support direction agnostic layouts the pseudo elements would be: :gap ( -[inline\block] ( -[start/end] ) ) You know how the shorthands work elsewhere, so this just replicates that.
- adregan 2y agoI often set gaps between elements to 1rem or more. Coloring the gap wouldn’t be the same as adding a rule. My “theory of layout” is that no element should have any styling that relates to its relationship with other elements. Gap is very useful for establishing spacing.
- thomasfedb 2y agoPerhaps with margin: auto your :gap element can sit in the middle of the “gap space”?
- adregan 2y agoI think we’re getting into kludge territory there. Might as well have an explicit property that can be autocompleted/stumbled upon via spec or docs than an implicit behavior born of a little trick.
- interstice 2y agoCame here to say this too, the flexibility of having something like :after would mean not having to consider all the potential ways people are going to want to use this. Not sure about content: though, that could get weird.
- rhet0rica 2y agoIsn't it (technically, officially) two colons for a pseudo-element? ::gap instead of :gap.
- SuperNinKenDo 2y agoI believe that was deprecated for reasons I don't understand, but admittedly, I'm too lazy to check since I'm on my phone.
- silverwind 2y agoI think a `gap-image`, similar to `border-image` would be more flexible.