CSS :not(:last-child):after selector

I have a list of elements, which are styled like this:

ul {
    list-style-type: none;
    text-align: center;
}

li {
    display: inline;
}

li:not(:last-child):after {
    content:' |';
}
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

Outputs One | Two | Three | Four | Five | instead of One | Two | Three | Four | Five

Anyone know how to CSS select all but the last element?

You can see the definition of the :not() selector here

9 Answers
9

Leave a Comment