Using the After and Hover together in CSS

Question

In order to show links that go to an external page, I have a little gif that goes after the text, using the after property of css.

.[style]:after{content:url(../images/main/externallink.gif)}

The problem is when it comes to making the image change (to change the colour) on roll-over; the following code works fine but adds the image to the first one instead of changing it!

.[style] a:hover:after{content:url(../images/main/externallinkover.gif)}

Can anyone suggest a way to make the original 'after' image disappear, or suggest a completely different way of doing this?

Answer 1

You're applying the hover image to a different element than the initial image.

If you apply both images to the link, you should get the behaviour you want:

.[style] a:after{content:url(../images/main/externallink.gif)}

.[style] a:hover:after{content:url(../images/main/externallinkover.gif)}

(Query: I take it .[style] isn't the actual selector you're using?)