How to make the last link does not have: after

Question

I have this CSS

.pages a { text-decoration: none; color: #1e1e1e; font-weight: bold; display: inline; padding-left: 8px; } .pages a:after { content: "|"; padding-left: 8px; } 

I want the contents in a:after have | after the last "a". How should I do it? I tried using :last-of-type , but that didn't work.

Currently it looks like

 1 | 2 | 3 | 

Answer 1

You can try this

 /*Other style goes here*/ .pages a:last-child:after { content: ""; } 

Demo.

Answer 2

Try using

 .pages a:after { padding-left: 8px; } .pages a:not(:last-child):after { content: '|'; } 

Fiddle

This will add an addition to all .pages a and it will add | for any a that is not the last child .pages

Answer 3

How about this, last-of-type will work

 .pages a:last-of-type:after{ content: ''; } 

Answer 4

Here is what you want, I think:

http://jsfiddle.net/VVv7f/

 .pages a { text-decoration: none; color: #1e1e1e; font-weight: bold; display: inline; padding-left: 8px; } .pages a:after { content: "|"; padding-left: 8px; } .pages a:last-child:after { content: ""; /* this line overwrites your "|" with empty "" */ }