Nth-child and ::after

[Gandalf]

I’m creating a list with a pipe separating each item so I have the following CSS:

.menu li {
    display: inline;
}
.menu li::after {
    content: ' |';
}

However, I don’t want the pipe after the last item. I guess I need to use nth-child but I’m not sure how - or is there a better way to do this?

Cheers G

[SamA74]

If the number of items in the list may vary, why not use before, rather than after, then remove the content from the first child:

ul li   {
    list-style: none;
    display: inline-block;
}
ul li:before {
    content: ' | ';
}
ul li:nth-child(1):before   {
    content: none;
}

[ralphm]

You could use this instead:

li:nth-child(n+2)::before {
    content: '| ';
}

[SamA74]

@ralphm

You could use this instead:

Better.

[Gandalf]

Thanks chaps!

[PaulOB]

If you want to support IE8 then just do this.

li:before {content: '| ';}
li:first-child:before{display:none}

[ronpat]

@ralphm

You could use this instead:

or

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

and be IE8 compatible.

[PaulOB]

@ronpat

or

More than one way to skin a cat

[Gandalf]

Thanks again, guys - but please don’t skin the cat!!