<p><a href="http://dl.getdropbox.com/u/240752/stars.gif" rel="nofollow noreferrer">My screenshot http://dl.getdropbox.com/u/240752/stars.gif</a></p>

<p>I want to have it so that only the text is underlined. The only way I can see of doing this is this:</p>

<pre><code>.no-underline {
   text-decoration:none;
}
.underline {
  text-decoration:underline;
}

&lt;a href="#" class="no-underline"&gt;&lt;span class="underline"&gt;Average customer review rating&lt;/span&gt;&lt;img src="img/five-stars.gif" alt="five stars" width="78" height="16" title="5 star review rating" /&gt;&lt;/a&gt;
</code></pre>

<p>Is this the best way? or does someone know a leaner way? Thanks.</p>

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.