My screenshot http://dl.getdropbox.com/u/240752/stars.gif
I want to have it so that only the text is underlined. The only way I can see of doing this is this:
.no-underline {
text-decoration:none;
}
.underline {
text-decoration:underline;
}
<a href="#" class="no-underline"><span class="underline">Average customer review rating</span><img src="img/five-stars.gif" alt="five stars" width="78" height="16" title="5 star review rating" /></a>
Is this the best way? or does someone know a leaner way? Thanks.
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.
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>
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; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.