html - :before to all children except :first-child

Question

我有一个水平导航。我试图用“|”分隔每个导航项(管道)仅使用 css。

HTML

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>Fifth</li>
</ul

现在看起来像这样

First   Second   Third   Fourth   Fifth

我希望它看起来像这样

First | Second | Third | Fourth | Fifth

我可以使用 css 来放置一个“|”在每个 <li> 之前

li:before {
    content:"|";
}

结果如何

|  First | Second | Third | Fourth | Fifth

如何在不添加“|”的情况下执行此操作到第一项？

Answer 1

您可以使用 :not伪类:

li:not(:first-child):before {
  content: "|";
}

ul {
  display: flex;
  list-style: none;
}
li:not(:first-child):before {
  content: "|";
  padding: 5px;
}

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ul>