Само по себе решение вызывает достаточно неоднозначную реакцию у сообщества. Еще со времен зарождения классического «однопиксельного» подчеркивания некоторых дизайнеров смущает пересечение нижних полосок с буквами. В последствии были придуманы разные хаки и даже специальное CSS свойство (text-decoration-skip). С другой стороны такой прием позволяет выделить нужный участок текста, ссылку либо конкретные слова в предложении, сделав типографику страницы чуть более интересной.
Как правило, для реализации используются яркие цвета, возможно, контрастные. Чаще всего они светлее текста, располагаются за ним. Степень пересечения элементов встречается разная — где-то они лишь соприкасаются, в других примерах «фон» занимает более трети текста.
Сложно сказать сколько проживет данный тренд веб-дизайна, главное при его реализации не забывать о юзабилити — тексты должны хорошо читаться, а обилие полосок не отвлекать пользователя от основного контента. С яркими акцентами нужно быть внимательным.
Свойство text-decoration-skip
Напоследок пару слов хотелось бы сказать про, упомянутое выше, CSS свойство, которое определяет как именно фоновая полоска будет вести себя с контентом на странице. Если интересно, в блоге есть детальная заметка про подчеркивание ссылок и текста.
У text-decoration-skip есть несколько значений:
- objects (по умолчанию) — пропускаются инлайновые элементы (в т.ч. картинки).
- none — создаются пересечения со всеми объектами.
- spaces — пропускаются пробелы, символы разделения текста и свойства letter-spacing / word-spacing.
- ink (как в примере выше) — линии не пересекает символы и буквы.
- edges — подчеркивание начинается строго от начала контента и заканчивается на последней букве.
- box-decoration — не учитываются отступы margin, border и padding.
Чтобы проще это понять вот картинка (из этой статьи).
