Limit underline to the text

HTML & CSS
1

Hi,

I’d like to have the underline for the text only and at the same keep the image part of the link:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title>Test</title>

<style type="text/css">
a:hover {text-decoration:none;}
img {border:none; vertical-align:bottom; padding-left:15px}
</style>

<a href="#">Subscribe to feed<img src="http://www.google.com/phone/static/images/feed-icon.gif" alt=""></a>

The code result isn’t the same in all major browsers.
Many thanks for any help!

2

There are two options. One is to wrap the text in a <span> and put the underline on that. But then you need to put a class on all links that contain images because CSS can’t work that out programatically.

Another solution is to use position:relative on the image to move it down a couple of pixels so that it covers the underline! You can add a couple of pixels of background colour to the bottom of the image to visually undo the shift.

3

I wonder if you could provide some embed code, too.
Thanks!

4 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title>Test</title>

<style type="text/css">
a, a:link, a:visited, a:hover, a:focus, a:active {
  text-decoration: none;
}
a span {
  text-decoration: underline;
}
a:hover span {
  text-decoration: none;
}
img {border:none; vertical-align:bottom; padding-left:15px}
</style>

<a href="#"><span>Subscribe to feed</span><img src="http://www.google.com/phone/static/images/feed-icon.gif" alt=""></a>

:slight_smile:

5

Thanks for the answer, but I like it to be supported by IE6, too.

6

Try this


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
	<title>Test</title>

	<style type="text/css">
	a, a:link, a:visited, a:focus, a:active {
		text-decoration: none;
	}
	a span {
		text-decoration: underline;
	}
	* html a:hover { /* IE descendant selector hack -- do not remove! */
		background:;
	}
	a:hover span, span:hover {
		text-decoration: none;
	}
	img {
		border:none;
		vertical-align:bottom;
		padding-left:15px;
	}
	</style>
</head><body>
	<a href="#"><span>Subscribe to feed</span><img src="http://www.google.com/phone/static/images/feed-icon.gif" alt=""></a>
</body></html>

(IE6 :hover descendant selector hack found here)

7

Perfect!