Подчеркнуть ссылку — настолько тривиальная вещь, какие вообще могут возникнуть проблемы? А я вам скажу, что это одна из самых хитрых вещей в вебе, с которой мне однажды пришлось повозиться.
По умолчанию у всех ссылок стоит text-decoration: underline. Выглядит нормально, проблем нет.
Но что если увеличить размер шрифта?
Подчёркивание стало толще. Причём толще основного штриха буквы. Выглядит ужасно. Ширина линии зависит от размера шрифта, повлиять на это нельзя. А заодно, нельзя изменить её цвет.
Дизайнеры любят делать цвет линии бледнее текста, чтобы она была менее навязчивой
Тут на помощь приходит border, это решает проблему с цветом и толщиной линии. Их можно менять как захочется.
Работает, но линия оказалась далеко от текста. Причём, чем больше высота строки, тем дальше эта линия. Выглядит неестественно. Попробуем нарисовать линию внутри ссылки с помощью псевдоэлемента ::after с position: absolute.
Выглядит отлично. Цвет, толщина, позиция — всё под контролем. Но постойте-ка ...
Абсолютно спозиционированный элемент всегда прибит к низу ссылки. Невозможно подчеркнуть остальные строки без дополнительных обёрток.
С помощью чего ещё можно нарисовать линию? Внезапно, с помощью background. Нарисуем градиент из прозрачного в синий высотой два пикселя и поставим вниз ссылки.
В инлайн-элементах свойство background распространяется на отдельно взятую строку, поэтому подчёркивание будет многострочным. Идеально!
Но изменить цвет подчёркивания у посещённой ссылки таким способом не получится. Разработчики браузеров ограничивают набор свойств, которые можно менять в :visited, из за потенциальной возможности следить за историей пользователя.
P.S. в черновиках уже есть свойства стилизации подчёркивания, например text-decoration-color. Но они пока нигде не работают и высота линии всё еще не регулируется.
Подчёркиваем ссылки красиво
Подчеркнуть ссылку — настолько тривиальная вещь, какие вообще могут возникнуть проблемы? А я вам скажу, что это одна из самых хитрых вещей в вебе, с которой мне однажды пришлось повозиться.
По умолчанию у всех ссылок стоит
text-decoration: underline
. Выглядит нормально, проблем нет.Но что если увеличить размер шрифта?
Подчёркивание стало толще. Причём толще основного штриха буквы. Выглядит ужасно. Ширина линии зависит от размера шрифта, повлиять на это нельзя. А заодно, нельзя изменить её цвет.
Тут на помощь приходит
border
, это решает проблему с цветом и толщиной линии. Их можно менять как захочется.Работает, но линия оказалась далеко от текста. Причём, чем больше высота строки, тем дальше эта линия. Выглядит неестественно. Попробуем нарисовать линию внутри ссылки с помощью псевдоэлемента
::after
сposition: absolute
.Выглядит отлично. Цвет, толщина, позиция — всё под контролем. Но постойте-ка ...
Абсолютно спозиционированный элемент всегда прибит к низу ссылки. Невозможно подчеркнуть остальные строки без дополнительных обёрток.
С помощью чего ещё можно нарисовать линию? Внезапно, с помощью
background
. Нарисуем градиент из прозрачного в синий высотой два пикселя и поставим вниз ссылки.В инлайн-элементах свойство
background
распространяется на отдельно взятую строку, поэтому подчёркивание будет многострочным. Идеально!Но изменить цвет подчёркивания у посещённой ссылки таким способом не получится. Разработчики браузеров ограничивают набор свойств, которые можно менять в
:visited
, из за потенциальной возможности следить за историей пользователя.P.S. в черновиках уже есть свойства стилизации подчёркивания, например
text-decoration-color
. Но они пока нигде не работают и высота линии всё еще не регулируется.