对无序列表中的每一行使用 :not(:last-child):after 伪元素答案

【问题标题】：Using :not(:last-child):after pseudo elements for each row inside an unordered list对无序列表中的每一行使用 :not(:last-child):after 伪元素
【发布时间】：2019-04-10 16:55:13
【问题描述】：

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

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>

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

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

【问题讨论】：

你好，简短的回答，我不认识。几种解决方法：如果您的文本未居中对齐，则可能。如果您为每行定义多个项目，则可以这样做。
@AmauryHanser 嗨 Amaury，如果我每行定义多个项目，怎么可能？你能详细说明一下吗？
如果你预先指定了每行的项目数，你可以使用:nth-child或类似的......
正如@Amaury 所说，如果文本左对齐或右对齐，则可以使用负边距和截止溢出隐藏一侧多余的项目符号，从而模拟效果。但是没有办法在一个包装的 flexbox 容器中定位一行中的第一个和最后一个项目，这是你在这里需要的； stackoverflow.com/questions/38962661/…

标签： html css css-selectors pseudo-element

【解决方案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>

【讨论】：

这太棒了！我对第 4 行代码有疑问。颜色元素到底在做什么？
对不起，颜色完全断章取义，我在之前的实验中忘记了。我更新了答案和小提琴。
一篇很棒的文章，如果你想进一步使用nth-child：css-tricks.com/…