Подчёркиваем ссылки красиво

Подчеркнуть ссылку — настолько тривиальная вещь, какие вообще могут возникнуть проблемы? А я вам скажу, что это одна из самых хитрых вещей в вебе, с которой мне однажды пришлось повозиться.

По умолчанию у всех ссылок стоит text-decoration: underline. Выглядит нормально, проблем нет.

Но что если увеличить размер шрифта?

Подчёркивание стало толще. Причём толще основного штриха буквы. Выглядит ужасно. Ширина линии зависит от размера шрифта, повлиять на это нельзя. А заодно, нельзя изменить её цвет.

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

Работает, но линия оказалась далеко от текста. Причём, чем больше высота строки, тем дальше эта линия. Выглядит неестественно. Попробуем нарисовать линию внутри ссылки с помощью псевдоэлемента ::after с position: absolute.

Выглядит отлично. Цвет, толщина, позиция — всё под контролем. Но постойте-ка ...

Абсолютно спозиционированный элемент всегда прибит к низу ссылки. Невозможно подчеркнуть остальные строки без дополнительных обёрток.

С помощью чего ещё можно нарисовать линию? Внезапно, с помощью background. Нарисуем градиент из прозрачного в синий высотой два пикселя и поставим вниз ссылки.

a {
  text-decoration: none;
  background-image: linear-gradient(to bottom, blue 50%, rgba(0,0,0, 0) 50%);
  background-repeat: repeat-x;
  background-position: 0 92%;
  background-size: 2px 2px;
}

В инлайн-элементах свойство background распространяется на отдельно взятую строку, поэтому подчёркивание будет многострочным. Идеально!

Но изменить цвет подчёркивания у посещённой ссылки таким способом не получится. Разработчики браузеров ограничивают набор свойств, которые можно менять в :visited, из за потенциальной возможности следить за историей пользователя.

P.S. в черновиках уже есть свойства стилизации подчёркивания, например text-decoration-color. Но они пока нигде не работают и высота линии всё еще не регулируется.