Нестандартное подчеркивание

Задача

Сделать особое оформление подчеркивания ссылок не прибегая к использованию дополнительных тегов. Примеры таких задач:

• цвет подчеркивания ссылки отличается от цвета самой ссылки
• сделать подчеркивание не сплошной линией (например, пунктирной)

Когда на странице много ссылок близко расположенных друг к другу, все их подчеркивания мешают восприимчивости текста, а иногда откровенно раздражают:

налепленные ссылки на europages

Но одно из основных правил юзабилити гласит, что ссылки на странице должны быть подчеркнуты, к этому все привыкли. Поэтому дизайнеры подчеркивания оставляют, но делают их приглушенными (более блеклым цветом или пунктиром):

приглушенное подчеркивание на livejournal.ru

пунктирное подчеркивание на b2b-club.ru

Решение

Для примера сделаем цвет подчеркивания отличным от цвета текста ссылки, плюс сразу сделаем его пунктиром. Т.к. напрямую нельзя влиять на цвет и вид подчеркивания ссылки, воспользуемся свойством border-bottom:

a {
color: #FF6600;
text-decoration: none;
border-bottom: 1px dashed #3399FF;
}

Очень простое решение. Таким же образом можно сделать любого вида подчеркивание используя свойство background-image при заданном background-position: left bottom.

Но данное решение не всегда подходит. Например, нужно оформить следующую ссылку:

При чем картинка должна быть тоже кликабильной. Попробуем простой путь:

a {
color: #FF6600;
text-decoration: none;
border-bottom: 1px dashed #3399FF;
background: url(path-to/wheel.png) no-repeat;
padding-left: 47px;
}

Жаль, но такой вариант в данном случае не подойдет — подчеркивание у нас бордюром, а бордюр тянется по всей ширине элемента:

IE7 оказался более тендитным к применению свойств чисто блочных (padding-top и padding-bottom) к строчному элементу:

В общем, придется немного усложнить html код ровно на один элемент. Для этого возьмем нейтральный — span:

<a href="#" class="wheel"><span>Авто</span></a>

.wheel {
color: #FF6600;
text-decoration: none;
background: url(path-to/wheel.png) no-repeat;
padding: 8px 0 8px 47px;
font-size: 16px;
font-weight: bold;
color: #084463;
zoom: 1; /* spacial for ie 7 */
}
.wheel span {
border-bottom: 1px solid #b7d2e0;
}

Демо пример. Проверено в:

• IE 6-7
• Firefox 3
• Opera 9.5 - 10
• Safari 4.0

Заметки

• В данном примере для IE сработал zoom (который в идеале лучше вынести в отдельный css, подключенный условными комментариями). Но он не всегда помогает. Если с zoom возникли какие-то проблемы (например, починило подчеркивание, но сломало верстку) заменяем zoom на position: relative.
• Такой прием можно применять не только к ссылкам.