将图像包装在标签中,但只在文本上加下划线

Question

我的截图http://dl.getdropbox.com/u/240752/stars.gif

我希望它只有文字加下划线.我能看到这样做的唯一方法是:

.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>

这是最好的方法吗？还是有人知道更精简的方式？谢谢.

Answer 1

没有其他解决方案.虽然你可以缩短一点:

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

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

这样你只需要指定一个类.