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:' |';

}

    
One
    
Two
    
Three
    
Four
    
Five

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

Answer

If it's a problem with the not selector, you can set all of them and override the last one

li:after
{
  content: ' |';
}
li:last-child:after
{
  content: '';
}

or if you can use before, no need for last-child

li+li:before
{
  content: '| ';
}