Clever Geek Handbook

Wrap the image in a tag, but only underline the text

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 do it 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 an easier way? Thank.

+1


source to share


3 answers


There is really no other solution. Although you can shorten it a bit:

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

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


This way you only need to specify one class.

+8


source


Which browser do you have a problem with this? Most browsers do not apply text decoration to images as it makes no sense.

otherize, just follow these steps:



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

.imgLink {
    text-decoration: underline;
}

.imgLink img {
    text-decoration: none;
}
0


source


If you want to add non-underlined image icons for reusable link types, for example to display an xref arrow in the wikipedia style, 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>
0


source






More articles:


All Articles