CSS伪元素的详细指南

一个真正的CSS技巧，如果有的话@ShadowShahriar创建了一个CodePen演示，使用伪元素在内联显示的列表项之间放置逗号，其结果是一个具有正确标点符号的自然的完整句子。

它是如何工作的

诀窍是什么？首先，让无序列表成为没有标记或间距的内联元素：

ul {
  padding: 0;
  margin: 0;
  display: inline;
  list-style-type: none;
}

接下来，我们将列表项内联显示，这样它们就像句子中的文字一样自然流动：

li {
  display: inline;
}

然后，我们通过选择列表项的::after 伪元素，并将其content 属性设置为逗号 (,) 的值，在列表项之间添加逗号：

li::after{
  content: var(--separator);
}

哦，但是等一下!那老式的牛津逗号呢？使用 [:nth-last-of-type()](https://css-tricks.com/almanac/selectors/n/nth-last-of-type/)来选择倒数第二的列表项，并将其::after 伪元素的content 属性设置为最后一个列表项之前的", and"：

li:nth-last-of-type(2)::after{
  content: ", and ";
}

我们还没有完成。@ShadowShahriar考虑了一个只有两个项目的边缘情况。我们所需要的是在这两个项目之间显示一个 "和"，所以：

li:first-of-type:nth-last-of-type(2)::after {
  content: " and ";
}