Limit underline to the text
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!
Try this:
Live Demo
<style type="text/css">
a, a:hover span { text-decoration:none; }
a span { text-decoration: underline; }
a 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>
a img {
text-decoration: none;
}
精彩评论