Как удалить ссылку под изображением (но сохранить текст)?

Question

У меня была ссылка с текстом и изображением.Я не хочу, чтобы изображение имело подчеркивание, но я хочу, чтобы текст имел подчеркивание.Есть ли способ поддержать это, не разбивая их на две отдельные ссылки?Вот пример изображения:

Answer 1

Нет, этого нельзя достичь, не разбив ссылку на две части.

Альтернативой является добавление border-bottom: 1px solid #000 к элементу, содержащему текст, однако это не будет вести себя так же, как и к нативному элементу A, с парящими, активными и посещенными состояниями - по крайней мере, без вмешательства javascript .

Answer 2

Вы можете легко сделать что-то структурированное, как:

<a><span>text</span><img /></a>

Затем вы можете удалить подчеркивание из a и применить подчеркивание к a span.

Демо здесь: http://jsfiddle.net/chrisvenus/pdrz9/

Следует отметить, что следующее не будет работать:

img {
  text-decoration: none;
}