Underline text on image rollover

[Schmoopy]

Hey again, does anyone know how to make text underline when you rollover an image? Here is a sort of example of what I mean : http://www.bombthehills.com/guides-tricktips-180.html
The bit I'm referring to is the "back to trick tips" part, with the arrow that moves on rollover. I want to make it so when you rollover the image, the arrow changes and the text underlines at the same time.
So far, when I've tried, it underlines the text and the image, but I want it to just underline the text.
Hope you can help me out,

Thanks,

Jack.

[magicyte]

I tried it and it surely works in IE7.

-magicyte

[Schmoopy]

I know it works, but it only 1/2 works. I want the text to underline when you mouse over the actual arrow image, not just when you rollover the text.
Because at the moment when you mouse over the arrow, it does move, but the text doesn't underline as well.

[magicyte]

Well, I'm not so sure. Let me check it out...

-magicyte

[Medyman]

Add the image as the background to the anchor:


<a href="#">back to trick tips</a>

CSS:

a {
background:url(images/buttons/back.png) no-repeat center right;
padding-left:30px;
}

a:hover {
background-image:url(images/back/back-over.png);
text-decoration: underline;
}

[Schmoopy]

Nice, with a bit of modification, worked a charm.

Thanks very much :D

Jack.

[murthyweb]

a {
margin-left:10px;
background:url(images/back.png) no-repeat;
padding-left:30px;
}

a:hover {
background-image:url(images/back-over.png);
text-decoration: underline;
}