Nth-child and ::after

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

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;
1 Like

You could use this instead:

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


Thanks chaps!

If you want to support IE8 then just do this.

li:before {content: '| ';}
1 Like


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

and be IE8 compatible.


More than one way to skin a cat :smile:

1 Like

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

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.