Make Nav Links From An Unordered List With Separators in CSS

Given this HTML

html

<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

css

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 [TODO: Code shorthand span ] 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