removing last element created by ::after pseudo-element

Question

I'm creating a nav menu and I'm using the ::after pseudo-element and I want to achieve this:

home | about | articles | personal projects

This is my css code:

nav ul li::after{
    content: " | ";
}

This is my HTML markup:

<nav class="wrapper">
    <ul>
        <li><a href="/">home</a></li>
        <li><a href="/about.php">about</a></li>
        <li><a href="/articles.php">articles</a></li>
        <li><a href="/projects.php">personal projects</a></li>
    </ul>
</nav>

Everything is good except for ::after is adding a | at the very end (as expected)

ex:

home | about | articles | personal projects |

Is there any way, only using css, to remove the last |?

I know I can use Javascript, or simply add this to my HTML. I'm looking for a pure CSS solution.

Answer 1

Or, you can use a simple CSS2 piece of code :

nav ul li + li:before {
   content: " | ";
}

And you won't have to worry about the last one. Elegant, compatible.

Sometimes, it's way more simple to use good old CSS selectors in the right way :)

Answer 2

A little long, but works:

nav ul li:last-child::after { content:''; }

or

nav ul li:last-child::after { display: none; }

Codepen