Подчеркивание любым цветом

Автор: Олег Тарабрин
Источник: http://stylesheet.ru/recipes/texts/underline-color.html

Что

Иногда можно увидеть текст, набранный одним цветом, а подчеркнутый другим. Этот прием дает возможность применения достаточно ярких оформительских приемов основанных на сочетании цвета текста и цвета подчеркивания. Прием легок в использовании, несмотря на то, что подчеркивание выполняется не цветом элемента.

Как

В каждую ссылку (тег a) вложим элемент span. А текст, который должен был быть ссылкой, вложим в этот элемент span. Естественно необходимо заменить текст в скобках (и сами скобки) на нужный текст и нужный адрес для гиперссылки.

<a href=`{адрес}`><span>{текст гипперссылки}</span></a>

Осталось добавить в таблицу стилей или секцию style правило для гиперссылок и правило, на основе селектора потомков, для элементов span, вложенных в гиперссылки. При этом необходимо заменить цвет подчеркивания и цвет текста на обозначения реальных цветов.

a {color:{цвет подчеркивания}; text-decoration:underline;}

span {color:{цвет текста};}

Почему

Основой для этого css-рецепта служат несколько особенностей свойства text-decoration. Во-первых, это свойство не наследуется. Таким образом то, что мы задали подчеркивание для внешнего элемента, вовсе не задало подчеркивание для внутреннего.

Во-вторых, согласно спецификации CSS, все содержимое элемента с установленным подчеркиванием - должно быть подчеркнуто. Включая и дочерние элементы без подчеркивания. И должно быть подчеркнуто цветом элемента в котором задано свойство text-decoration, а не цветом дочернего элемента.

Таким образом мы использовали внешний элемент для того что бы задать цвет подчеркивания, а внутренний элемент для изменения цвета самого текста. Этот рецепт может быть применен и для других пар элементов, не только для гиперссылок и элементов span.