CSS 相同元素间添加逗号隔开但最后一个元素后不添加逗号

需求

相同的元素将添加分隔符，最后一个元素后面不添加。

代码

使用:not伪类，并传入:last-child，表明除了最后一个元素，都生效。

再使用::after伪类，追加内容，使用margin指定伪类与元素之间的间距。

<div>
    <span class="topic">Java</span>
    <span class="topic">React</span>
    <span class="topic">AI</span>
</div>

.topic:not(:last-child)::after {
    content: "/";
    margin: 0 0 0 0;
    color: #8a8a8a;
}