Оберните изображение в тег, но подчеркните только текст

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; }

Таким образом, вам нужно указать только один класс.

Answer 2

Если вы хотите добавить значки без подчеркивания изображения для многократно используемых типов ссылок, например, для отображения стрелки внешней ссылки в стиле Википедии, попробуйте следующий стиль:

a.externalLink{
    padding-right: 15px;
    background: transparent url('badge.png') no-repeat center right;
}

Тогда в вашей разметке:

<a href="foo" class="externalLink">bar</a>

Answer 3

В каком браузере у вас проблема с этим? Большинство браузеров не применяют оформление текста к изображениям, поскольку оно не имеет смысла.

другие, просто сделайте так:

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

.imgLink {
    text-decoration: underline;
}

.imgLink img {
    text-decoration: none;
}