In CSS, how to place seperators between items if they are on the same line?

Question

I have a list of inline-block elements inside a block container. These elements may or may not wrap over multiple lines depending on the screen size. This is exactly what I want to happen.

However, if two of these elements are next to one another on the same line, I would like to put a bullet or some other separator between them. I am aware that I can use the + operator in conjunction with the ::before pseudo-element to place a separator between elements. The only problem I have with this approach is that is also places the separator pseudo-element at the beginning of successive lines, which I do not want. I only want the separator between elements if they are on the same line.

How might I be able to accomplish this?

Edit: Also, my text is center-aligned in this situation

What about putting the `+` after (`::after` instead of `::before`) with an extra style for `:last-child` that suppresses the `+` sign after the last one? Does that get you any closer? — Marc, Sep 21 '20 at 22:05
That would put the separator at the end of the line instead of the beginning, but it's more or less the same situation. — DMJ, Sep 21 '20 at 22:52

ray · Answer 1 · 2020-09-21T22:31:35.010

I think you might be able to get there with some clever negative margins and overflow hiding.

The snippet below sets a negative margin on the inline-block items, which has the effect of pulling them left beyond the container's bounding box, which has overflow set to hidden. The items then use an equivalent left padding to push the content to the right, so it appears where it normally would.

The ::before pseudo element is still there for the first item on the line but it gets clipped by the container.

ul {
  overflow: hidden;

  /* boilerplate. not relevant to the question */
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  position: relative;
  display: inline-block;
  padding: 1rem;
  margin-left: -1rem;
}

li::before {
  content: '+';
  position: absolute;
  left: 0;
}

<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

That's a clever thought, that would work great, except in my situation the items are centered, where this only works for left-aligned text... — DMJ, Sep 21 '20 at 22:53

In CSS, how to place seperators between items if they are on the same line?

1 Answers1