Однажды на сайте студии Лебедева изменился стиль ссылок, было text-decoration: underline, а стало border-bottom: 1px solid c более бледным цветом:


Возможно это лишь промежуточный шаг на пути к неподчёркнутым ссылкам, которых пока не бывает, но выглядит забледнение прикольно. Напрягает только позиция линии — bottom вместо baseline. Дизайнеры негодуют:


Ощущения прыгающей строки не было бы, если голубая линия стояла выше, там же где и нативное подчёркивание. Но как этого добиться? Надёжно управлять позицией border-bottom не возможно; перекрасить text-decoration можно с помощью вложенного элемента, но такое подчёркивание будет перекрывать нижние выносные элементы букв.


Короче, задача показалась мне интересной, и я написал твит:


Кроме ответов про вложенный элемент, было два, которые и вдохновили на эту заметку.

1) Вадим Макеев написал про светлое будущее:

@pepelsbey: По хорошему, это делается при помощи text-decotation-color из CSS3 Text — http://dev.w3.org/csswg/css3-text/#text-decoration-color

2) Сергей Чикуёнок предложил решение для сурового настоящего через хитрые градиенты, причём он не ограничился сплошной линией, и показал ещё пунктир и точки:

@chikuyonok: Сделал пример с различными стилями подчёркивания ссылок с помощью CSS-градиентов — http://jsfiddle.net/yyHNp/5/

Это решение позволяет удобно управлять цветом, позиционированием и стилем линии, но не работает в старых браузерах. Для совместимости с динозаврами вместо градиентов можно использовать не столь гибкие картинки, как в моём примере border-bottom vs. background.

Ах да, теперь мечта многих дизайнеров о пунктире по базовой линии — реальность.