:before to all children except :first-child

Question

I have a horizontal navigation. I'm trying to separate each nav item with a "|" (pipe) using only css.

HTML

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

Right now it looks like this

First   Second   Third   Fourth   Fifth

I want it to look like this

First | Second | Third | Fourth | Fifth

I'm able to use css in order to put a "|" before each <li>

li:before {
    content:"|";
}

How ever the result is

|  First | Second | Third | Fourth | Fifth

How do I do this with out adding the "|" to the first item?

Answer 1

other option :)

li {
  display: inline-block
}
li + li:before {
  content: '|';
}

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

Answer 2

You can use the :not pseudo-class:

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>

Answer 3

You could use the nth-child selector to target all elements after the first

li:nth-child(n+2):before {
  /* ... */
}

Answer 4

Add this rule in addition to your current one.

li:before:first-child {
    content: none;
}

Pretty sure that will do it.