Wrap an image in an a tag, but only have underline on text.

Answer 1

No other solution really. Though you can shorten it a little:

<a href="#" class="imgLink"><span>Link Text</span> <img src="..."></a>

a.imgLink { text-decoration: none; }
a.imgLink span { text-decoration: underline; }

That way you only need to specify one class.

Answer 2

In which browser do you have a problem with this? Most browsers do not apply text-decoration to images since it makes no sence.

othersize, just do like this:

<a class="imgLink" href="">some text<img src="" /></a>

.imgLink {
    text-decoration: underline;
}

.imgLink img {
    text-decoration: none;
}

Answer 3

If you want to add non-underlined image badges for reusable link types, such as displaying a wikipedia-style external link arrow, try the following style:

a.externalLink{
    padding-right: 15px;
    background: transparent url('badge.png') no-repeat center right;
}

Then in your markup:

<a href="foo" class="externalLink">bar</a>