Adding a partial border on list item but not on the first element

Hi experts,
I have a top menu bar created with a list and I want separators made of a partial border.
So far I have this:
#TopLinks .nav > li > a:after{content:""; background: #a8a8a8; position: absolute; bottom: 5px; left: 0; height: 50%; width: 1px;}
This is working great, but I don't want the first element to have a border.
I've tried combined (not)first-child with the previous style, but I can't make it work.

That's what I have so far with the style above:
 topbarYou can see that the first element has a border on the left, which I don't want.
Any help appreciated, thanks.
Who is Participating?
ChetOS82Connect With a Mentor Commented:
#TopLinks .nav > li:first-child > a:after{width:0px;}
#TopLinks .nav > li > a:not(:first-child):after{...}
My only concern with :not is that it isn't supported on IE8 or earlier.
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

hqdevAuthor Commented:
ChetOS82, this is working!
Sorry Cathal, but this is not working.
hqdevAuthor Commented:
It's for an intranet, so we are in control of browsers and we will use only the latest, it's ok, if it's not IE8 compatible.
Yeah it should have been

#TopLinks .nav > li:not(:first-child) > a:after

If you are still writing code to support IE8 you need a reality check
hqdevAuthor Commented:
Just for fun, I've tested your last entry Cathal and it's working, sorry I've already close the case.
NP, accepted solution is perfectly valid.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.