Is it possible to combine the css3 pseudo classes :after and :lastchild?

Problem

I have a list of links and I am using the following code to put a word after each link item:

a:after {content: "eg"}

However, I don't want the content to come after the last item in the list, so ideally I would like to say something like

a:last-child:after {content: ""}

but this is stripping the content that comes after all the links. Is there anyway way of combining these two? If there is and you can explain what is going on exactly I would really appreciate it :)

Thanks

Problem courtesy of: nick501414

Solution

Try this:

HTML:

<ul>
<li><a href="#">Check this out</a></li>
<li><a href="#">Check this out</a></li>
<li><a href="#">Check this out</a></li>
</ul>

​ CSS:

a:after {content: "what what"}
li:last-child > a:after {content: ""}​

Here is a Fiddle to demonstrate.

Also, keep in mind, if you have many users that use IE7 and IE8, the :after pseudo class does not work in IE7 and below, and the :last-child pseudo class does not work in IE8 and below. See here: http://www.quirksmode.org/css/contents.html

Solution courtesy of: Brian Sweat

Discussion

I'd do that with a combination of :not, :last-child and :after. With :not(:last-child) you select every link except the last one: http://jsfiddle.net/2CS9G/

a:not(:last-child):after{
    content: "--";
}

If your a-tags are in a list (ul): http://jsfiddle.net/2CS9G/2/

li:not(:last-child) a:after{
    content: "--";
}
Discussion courtesy of: Alex

It works for me > link

It might be that you forgot to add display: block to the a.

Discussion courtesy of: Maroshii

Does this comment by "Delphi" help? (https://stackoverflow.com/a/4917325/960592

Using nick craver's solution with selectivizr allows for a cross browser solution (IE6+)

Discussion courtesy of: Ideogram

The following selector combination worked for me:

#myObj ul li:last-child::after { . . . }
Discussion courtesy of: Atara

This recipe can be found in it's original form on Stack Over Flow.