Медная поляна

Изменения стиля подчеркивания ссылок (цвет, внешний вид, толщина) — слишком заманчивая возможность, чтобы ей не воспользоваться. Код для такого случая предельно прост:

a {border-bottom: 2px dashed #f00; text-decoration: none;}

Все замечательно до тех пор, пока в тексте не попадется картинка расположенная внутри ссылки. Может быть, вас устроит положение вещей, при котором под рисунком красуется рамка, а если нет?

как выглядит картинка-ссылка?

jQuery – это первое, что мне пришло на ум. Данная библиотека позволяет применить селектор :has , который дает возможность изменить свойства элемента, если внутри его есть указанный элемент. В нашей ситуации это выглядит так:

$(function() {        
    $('a:has(img)').css('border','0');
});

Способ выручает, но подключать фреймворк ради такого случая равносильно стрельбе из пушки по воробьям. Думаю, всех бы устроила поддержка селектора «содержит элемент» в CSS 3, но в последнем опубликованном драфте его нет; возможно, появится в будущем...

Конечно, ручное назначение класса для ссылок, содержащих рисунок с указанием для них a.class {border: 0;} устраняет проблему, но ведь совершенно нет возможности постоянно напоминать контентонаполнителю о каких-то дополнительных манипуляциях с атрибутами.

Второй подход — использование отрицательные полей.

CSS:

a img {margin-bottom: -7px;}

Правда, для старичков Internet Explorer 6 и 7 придется дополнительно указывать избыточный css-код

a {position: relative;}
a img {position: relative;}

чтобы в них все было на мази. Можете посмотреть пример, однако, такое решение имеет свои подводные камни. О них и не только — в одном из следующих постов.