Using :not(:last-child):after pseudo elements for each row inside an unordered list

Question

I'm trying to create a list of artists to perform at an event. I want it to look like this:

desired-effect

I'm using an unordered list like this:

 ul { padding-left: 0;
  margin-left: 0;
  display: flex;
  flex-flow: row wrap;
 }
 
 li {
  list-style: none;
 }
 
.lineup-list li:not(:last-child):after {
  content: " . "
}

<ul class="lineup-list">
  <li>Amazing Band</li>
  <li>Great Band</li>
  <li>Great Band</li>
  <li>Great Band</li>
  <li>Cool Band</li>
  <li>Nice Band</li>
  <li>Cool Band</li>
</ul>

This works... but at the end of each row there's a period that I don't want. If I were to manually go through and add a period it still wouldn't solve the problem since if someone resizes their screen the periods would be in the wrong place again.

Is there a way for items to have periods between them ONLY when they are not at the end of a ROW? Thanks.

Answer 1

What about something like this --> https://jsbin.com/mereqex/edit?html,css,output

CSS:

ul {
   padding-left: 0;
   margin-left: 0;
   text-align: center;
}

li {
  display: inline;
}

.lineup-list li:not(:first-child):before {
  content:  " \B7  ";
}

.lineup-list li:nth-child(3n):before {
  content: "\A";
  white-space: pre;
}

HTML:

<ul class="lineup-list">
  <li>Amazing Band</li>
  <li>Great Band</li>
  <li>Great Band</li>
  <li>Great Band</li>
  <li>Cool Band</li>
  <li>Nice Band</li>
  <li>Cool Band</li>
</ul>