title: Wrap an image in an a tag, but only have underline on text
body: <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>