Question

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

Answer 1

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