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

在项目列表中动态添加逗号是一种常见的布局需求。通过使用 CSS 伪元素和选择器，我们可以实现这一效果，而无需修改 HTML 结构或使用 JavaScript。

首先，我们需要一个包含多个项目的列表。示例如下：

<ul class="project-list">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
  <li>项目4</li>
</ul>

接下来，我们可以使用 CSS 来在项目之间添加逗号。在这里，我们将使用 ::after 伪元素来插入逗号，并使用 content 属性设置其内容为逗号字符。然后，我们使用选择器来定位每个项目元素之后的伪元素。代码如下：

.project-list li:not(:last-child)::after {
  content: ",";
}

这段 CSS 代码的意思是选择列表中除了最后一个项目之外的所有项目元素，然后在其后插入一个逗号。这样，只有在两个项目之间才会显示逗号。

最后，我们可以根据需要对逗号样式进行自定义。例如，我们可以为逗号添加空格，使其看起来更美观。代码如下：

.project-list li:not(:last-child)::after {
  content: ", ";
}

现在，我们的项目列表之间将显示逗号，并且逗号后面有一个空格。

这是一个简单的使用 CSS 在项目列表之间动态添加逗号的方法。通过使用伪元素和选择器，我们可以轻松地实现这样的效果，而无需使用额外的 JavaScript 或修改 HTML 结构。

注意：在使用这种方法时，请确保您的目标浏览器支持 CSS 的伪元素和选择器。