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

Question

我正在尝试创建要在事件中表演的艺术家列表。我希望它看起来像这样:

desired-effect

我正在使用这样的无序列表:

 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>

这行得通...但是在每一行的末尾都有一个我不想要的句点。如果我手动检查并添加一个句点，它仍然无法解决问题，因为如果有人调整屏幕大小，句点将再次出现在错误的位置。

有没有办法让元素只有在不在一行末尾时才在它们之间有句点？谢谢。

Answer 1

像这样的事情怎么样 --> 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>