如何使用 CSS 在项目列表之间动态添加逗号？

1.前言

在前端项目中，难免会遇到需要在多个项目/商品/分类之间添加逗号的情况，比如在商品列表或者分类过滤条件中，各个项目之间需要用逗号隔开。本文将介绍一种使用 CSS 实现在项目列表之间动态添加逗号的方法。

2.实现方式

2.1 使用 ::before 伪元素

我们可以使用 ::before 伪元素来给列表项添加逗号。具体实现方式如下：

li::before {

  content: ", ";
}
li:first-child::before {
  content: "";
}

以上代码会在每个列表项之前添加逗号，同时排除第一个列表项。但这种方法存在一个问题，当最后一个列表项添加了逗号之后，就不能再使用 CSS 来控制，所以我们需要使用 JavaScript 动态地控制最后一个列表项是否需要添加逗号。

2.2 使用 JavaScript 控制

我们可以使用 JavaScript 控制列表项之间的逗号添加，在列表项之后插入逗号的方式来实现。具体实现方式如下：

li {

  display: inline-block;
  margin-right: 5px;
}
li:last-child:after {
  content: "";
}
li:after {
  content: ",";
}

const items = document.querySelectorAll('li');

const lastItem = items[items.length - 1];
lastItem.classList.add('last-item');
if (lastItem.classList.contains('last-item')) {
  lastItem.classList.remove('last-item');
  lastItem.insertAdjacentHTML('afterend', ',');
}

以上代码会在每个列表项之后添加逗号，但是排除了最后一个列表项，因此需要在 JavaScript 中动态地控制最后一个列表项是否添加逗号。如果最后一个列表项没有逗号，那么在动态添加新的列表项时，会先为最后一个列表项添加逗号然后再为新列表项添加。

3.完整实现代码

根据以上介绍，完整的实现代码如下：

<ul class="list">

  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
  <li>项目四</li>
  <li>项目五</li>
</ul>

.list {

  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  margin-right: 5px;
}
li:last-child:after {
  content: "";
}
li:after {
  content: ",";
}
.last-item:after {
  content: "";
}

const items = document.querySelectorAll('li');

const lastItem = items[items.length - 1];
lastItem.classList.add('last-item');
if (lastItem.classList.contains('last-item')) {
  lastItem.classList.remove('last-item');
  lastItem.insertAdjacentHTML('afterend', ',');
}

使用以上代码即可在列表项之间实现动态添加逗号的效果。

4.总结

本文介绍了一种使用 CSS 和 JavaScript 实现在项目列表之间动态添加逗号的方法。通过使用 ::before 伪元素和 JavaScript 控制，我们成功地将逗号添加到了每个列表项之后，同时动态地控制最后一个列表项是否添加逗号。这种方法简单有效，可以用于项目中类似的需求。