Изменения стиля подчеркивания ссылок (цвет, внешний вид, толщина) — слишком заманчивая возможность, чтобы ей не воспользоваться. Код для такого случая предельно прост:
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;}
чтобы в них все было на мази. Можете посмотреть пример, однако, такое решение имеет свои подводные камни. О них и не только — в одном из следующих постов.