Inline separators

inline-separators.css

:root {
  --separator-text : ' | ';
  --separator-size : .45em;
}

.inline-separators {  
  &:dir(ltr) {
    clip-path : inset(-100vh -100vw -100vh 0);
  }
  
  &:dir(rtl) {
    clip-path : inset(-100vh 0 -100vw -100vh);
  }

  & > * {
    display           : inline-block;
    text-indent       : calc(-1 * var(--separator-size));
    margin-inline-end : var(--separator-size);
    
    &::before {
      content         : var(--separator-text);
    }
  }
}

inline-separators.md

Pure CSS mechanism for introducing typographic separators between contiguous inline elements.

A separator will appear between any two sequential items on the same line, but never at the start or end of a line. Thus if the layout results in one item per line, no separators will be shown; if all items are on the same line, there will be {items - 1} separators. It's when neither scenario can be guaranteed that the mechanism shines!

Add the .inline-separators class to the parent and specify the separator content via the --separator-text custom property. The --separator-size custom property also needs to be specified to account for the inline size of the separator, depending on content & font. These properties are inheritable and default values are specified on the root.

The mechanism works by introducing a separator before every item, then applying negative text-indent to items at the start of a line, and clipping any content outside of the containers content box in the opposite direction to text flow (ie left in Latin scripts).

This means the container ought not to have leading inline padding or contents needing to appear outside its box in that direction (contents above and below, and outside in the direction of text, will still be rendered — useful for eg necessarily overflowing unbroken text). If these caveats present a problem, simply create an extra wrapper.