Question

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.

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.