::before 伪元素不会成为原始列表元素的第一个子元素

Question

我尝试制作一个由 link 分隔的内联列表，由 | 标记分隔。它可能是 hacky，但我认为它应该与使用 ::before 伪元素一起工作：

li {
  list-style: none;
  float: left;
}
li:not(:first-child) ::before {
  content: "|";
  margin: 0 1em;
}

<ul>
  <li><a href="..">Example 1</a></li>
  <li><a href="..">Example 2</a></li>
  <li><a href="..">Example 3</a></li>
</ul>

看起来不错，但由于某种原因 | 成为 link 元素的一部分。它可以点击并以相同的标准蓝色突出显示。

我希望伪元素成为 li 元素的第一个子元素，在由 link 组成的内容之前。我做错了什么？

Answer 1

你确实在 ::before 之前有一个额外的 space，如果你删除它看起来不错。

li {
  list-style: none;
  float: left;
}
li:not(:first-child)::before {
  content: "|";
  margin: 0 1em;
}

<ul>
  <li><a href="..">Example 1</a></li>
  <li><a href="..">Example 2</a></li>
  <li><a href="..">Example 3</a></li>
</ul>

Answer 2

我认为你犯了语法错误。这应该是：

li:not(:first-child)::before

::before pseudo element doesn't become first child of originating list element