在无序列表中使用:not(:last-child):after伪元素来为每行添加样式

Question

在无序列表中使用:not(:last-child):after伪元素来为每行添加样式

5

我正在尝试创建一个表演者名单以在活动中使用。我希望它看起来像这样：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>

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

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

- Tom Parke

你好，简短回答，我不知道。有几个解决方法：如果你的文本不是居中对齐的话，那么是可能的。如果你定义每行的项目数量，那么也是可能的。 - Amaury Hanser

@AmauryHanser 你好，如果我想定义每行的项目数量，有什么方法可以实现吗？能详细说明一下吗？ - Tom Parke

如果您事先指定了每行的项目数量，那么您可以使用:nth-child或类似的方法... - misorude

正如@Amaury所说，如果文本是左对齐或右对齐的，则可以使用负边距和截断溢出来隐藏一侧的多余符号，从而模拟效果。但是，在包装flexbox容器中，没有办法针对一行中的第一个和最后一个项目，这就是您在此处需要的内容；https://dev59.com/l5nga4cB1Zd3GeqPet6C - misorude

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DanieleAlessandra · Accepted Answer

这样的东西怎么样 --> 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>