Make Nav Links From An Unordered List With Separators in CSS

Given this HTML

Code

<nav>
  <ul>
    <li>alfa</li>
    <li>bravo</li>
    <li>charlie</li>
  </ul>
</nav>

You can use this CSS to create nav links that are all on one line with a | separator between them

Code

nav > ul {
    list-style-type: none;
    padding-left: 0;
}

nav > ul > li {
    display: inline-block;
}

nav > ul > li:nth-last-child(n+2)::after {
    display: inline-block;
    content: '|';
    padding: 0 3px;
}

I like this approach because the `:nth-last-child(n+2)`` puts the separator between the links without having to do anything in the HTML. And, it does so without adding one after the last link.

Use CSS to make separators between nav links