Add special character after all links in footer except last

[digitalvaldosta]

I am trying to add a pipe between each link in my client’s footer. Found a partial solution by using :after pseudo selector. This, however, adds a pipe character after the last link as well and can not figure out how to remove from the last. Attempted to use :last-child to remove the character, didn’t affect anything. Here is the css that I am using:

#foot-nav a:after {

content: " | ";

}

I don’t mind if this is in php or css3 (rather not javascript). Any help on this would be great.

[TheDoc]

I think you can double up pseudo-selectors. Something like this:

#foot-nav a:last-child:after {

content: " ";

}

[TheDoc]

Yes indeedy, worked like a charm: http://jsfiddle.net/7EDhC/

[bhagavan]

I think its not working in all browsers.
Any how Nice thing.

[joshuanhibbert]

Another option, just to decrease the amount of code written, is to use nth-child:

#foot-nav a:nth-child(n+2):before {

content: ' | ';

}

But just like last-child it won’t work in older IE.

[jamygolden]

#foot-nav a:before {content: " | "; }

#foot-nav a:first-child:before{content: ''; }

Works down to IE8

[TheDoc]

@jamy_za – very nice. I remember we had used that solution on another problem in the forum before, totally forgot about it!

[jamygolden]

@TheDoc yeah, it’s very handy. I do something like that about two (or more) times every project I work on. This example obviously won’t work in LTE IE7 due to :before, but the fact that IE7 (semi) supports :first-child really makes my life a lot easier lol.

[digitalvaldosta]

Is it possible to use php to solve the whole cross browser issue?

[jamygolden]

The only cross browser issue is IE6.

But you could do it with jQuery pretty easily.

$('#foot-nav a').before(' | ');

[Author]

Posts