Существует множество различных способов задать подчеркивание текста CSS. Если мы говорим об идеальном сценарии, подчеркивание должно удовлетворять следующим условиям:

• Располагаться ниже базовой линии строки;
• Не соприкасаться непосредственно с частями букв, выступающими ниже базовой линии;
• Должна быть возможность изменять цвет, толщину и стиль линии подчеркивания;
• Подчеркивание должно продолжаться после переноса текста;
• Подчеркивание должно работать на любом фоне.

Все это довольно очевидно. Но, насколько я знаю, не существует способа добиться всего этого с помощью CSS.

Способы, с помощью которых можно подчеркнуть текст в интернете:

• text-decoration;
• border-bottom;
• box-shadow;
• background-image;
• Фильтры SVG;
• Underline.js (canvas);
• text-decoration-*.

Давайте рассмотрим их один за другим и поговорим об их плюсах и минусах.

text-decoration

text-decoration - это самый простой способ CSS подчеркивания. Применяется всего одно свойство и на этом все. Для небольших размеров шрифта это может выглядеть довольно прилично, но увеличьте размер и та же линия начинает выглядеть неуклюже.

Посмотреть пример

Самая большая проблема применения text-decoration - отсутствие настраиваемости. Свойство соответствует любому размеру шрифта или цвету текста, к которому оно применено, и не существует кроссбраузерного способа изменить заданный стиль.

ПЛЮСЫ

• Его просто применять;
• Располагается ниже базовой линии;
• По умолчанию добавляет отступы от частей букв, выступающих ниже базовой линии (в Safari и iOS);
• Переносится по строкам;
• Подходит для любого фона;

МИНУСЫ

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

border-bottom

border-bottom - отличается простотой использования и настраиваемостью. Свойство позволяет довольно просто изменять цвет, толщину и стиль линии подчеркивания текста CSS.

Результат применения border-bottom к строчным элементам:

Посмотреть пример

Обратите внимание, что линия подчеркивания размещается под частями букв, выступающими ниже базовой линии. Это можно изменить, задав для элемента свойство inline-block и уменьшив значение line-height. Но в этом случае вы теряете возможность переносить текст. Подходит для однострочного текста.

Посмотреть пример

Можно использовать свойство text-shadow, чтобы скрыть часть линии подчеркивания, выступающей ниже базовой линии. При этом необходимо использовать цвет фона. Данный подход работает только со сплошными цветами фона, но не с градиентной заливкой или изображениями.

Посмотреть пример

Чтобы задать одно подчеркивание, нужно применить четыре свойства стилей. Это больше, чем для text-decoration.

ПЛЮСЫ

• С помощью text-shadow можно задать отступы от частей букв, выступающих ниже базовой линии;
• Можно изменить цвет, толщину и стиль линии CSS подчеркивания;
• Можно задать переходы и анимацию для цвета и толщины линии подчеркивания;
• Переносится по умолчанию, если это не inline-block;
• Работает на любом фоне, если не используется text-shadow.

МИНУСЫ

• Размещается далеко от текста, это положение трудно изменить;
• Нужно использовать много дополнительных свойств;
• Странное выделение текста при использовании свойства text-shadow.

box-shadow

Это свойство формирует подчеркивание с помощью двух теней: одна создает прямоугольник, вторая - скрывает большую его часть, кроме нижней. Данный метод применим только для однотонного фона.

Посмотреть пример

Можно использовать тот же самый трюк, что и с text-shadow, чтобы имитировать отступы от частей букв, выступающих ниже базовой линии. Если линия подчеркивания должна отличаться по цвету от текста, то у вас не возникнет таких проблем, как в случае с text-decoration.

ПЛЮСЫ

• Нижнее подчеркивание CSS может быть размещено ниже базовой линии;
• С помощью text-shadow можно задать отступы ниже базовой линии;
• Можно изменить цвет и толщину линии подчеркивания;
• Подчеркивание переносится построчно.

МИНУСЫ

• Невозможно изменить стиль;
• Не работает для любого фона.

background-image

background-image дает результат, подходящий под все перечисленные критерии. При этом используются linear-gradient и background-position, чтобы создать изображение, которое повторяется по горизонтали вдоль строк текста. При этом для текста должно быть задано display: inline;.

Посмотреть пример

Вместо linear-gradient можно добавить собственное изображение с какими-нибудь эффектами.

Посмотреть пример

ПЛЮСЫ

• Подчеркивание ссылки CSS может быть размещено ниже базовой линии;
• С помощью text-shadow можно задать отступы ниже базовой линии;
• Можно изменять цвет, толщину и стиль подчеркивания;
• Работает с пользовательскими изображениями;
• Подчеркивание переносится построчно;
• Работает на любом фоне, если не используется text-shadow.

МИНУСЫ

• Размер изображения может изменяться по-разному в зависимости от разрешения, браузера и масштаба просмотра.

Фильтры SVG

Можно создать SVG элемент filter, который рисует линию, а затем расширяет текст, чтобы скрыть прозрачные части линии. После этого нужно задать для фильтра идентификатор и сослаться на него в CSS:

filter: url(‘#svg-underline’).

Преимущество этого подхода заключается в том, что фильтр добавляет прозрачность, не используя text-shadow. Можно задать промежутки линии CSS подчеркивания выступающими ниже базовой на любом фоне. Но этот метод не применим для однострочного текста, в этом его основной недостаток.

Посмотреть пример

Вот как это выглядит в Chrome и Firefox:

Поддержка браузерами IE, Edge, и Safari является проблематичной. Проверить наличие поддержки SVG-фильтра в CSS трудно.

ПЛЮСЫ

• Может быть размещено ниже базовой линии;
• Можно задать отступы ниже базовой линии;
• Можно изменять цвет, толщину и стиль линии подчеркивания;
• Работает на любом фоне.

МИНУСЫ

• Подчеркивание не переносится на несколько строк;
• Не работает в IE, Edge или Safari, но можно создать резервный вариант с помощью text-decoration. В Safari оно будет выглядеть хорошо в любом случае.

Underline.js (canvas)

Underline.js рисует CSS подчеркивание с помощью элементов <canvas>. Это новый подход, который работает на удивление хорошо.

Это только техническая демо-версия, поэтому для использования библиотеки придется осуществить глобальные изменения в разрабатываемом проекте.

Мы приводим данный метод для демонстрации возможностей <canvas> при создании красивых, интерактивных подчеркиваний.

Свойства text-decoration-*

Это свойство прекрасно работает само по себе, но можно добавить несколько экспериментальных свойств для настройки внешнего вида:

• text-decoration-color;
• text-decoration-skip;
• text-decoration-style.

Только не радуйтесь раньше времени. Помните о проблеме поддержки браузерами.

TEXT-DECORATION-COLOR

Позволяет изменить цвет CSS подчеркивания пунктиром отдельно от цвета текста. Данное свойство хорошо поддерживается браузерами. Оно работает в Firefox и с помощью префикса в Safari. Но если не обрабатывать разрывы ниже базовой линии текста, то Safari поместит подчеркивание поверх текста.

Firefox:

Safari:

TEXT-DECORATION-SKIP

Это свойство добавляет разрывы ниже базовой линии:

Оно не является стандартным и на данный момент работает только в Safari, поэтому для его применения нужно использовать префикс -webkit. Safari поддерживает это свойство по умолчанию, поэтому разрывы добавляются даже на тех сайтах, где свойство не указано вообще.

TEXT-DECORATION-STYLE

Данное свойство предлагает те же типы подчеркивания текста CSS, которые можно задать с помощью border-style. И кроме этого добавляет тип линии wavy (волнистая).

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

• dashed;
• dotted;
• double;
• solid;
• wavy.

На данный момент text-decoration-style работает только в Firefox, вот скриншот:

Варианты стилей однотонного подчеркивания

Выглядит знакомо, не правда ли?

В чем недостатки?

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

После небольшого исследования я нашел эти два свойства:

• text-underline-width;
• text-underline-position.

Похоже, они рассматривались в более ранних версиях CSS, но так и не были реализованы из-за отсутствия интереса.

Вывод

Для CSS подчеркивания небольшого текста я рекомендую использовать text-decoration, а затем применить text-decoration-skip. Это выглядит не слишком изящно в большинстве браузеров, но зато будет работать. Плюс всегда есть шанс, что поддержка этих свойств будет реализована в большинстве браузеров.

Для большего текста стоит использовать подход фонового изображения. Он работает. Кроме этого, существуют примеси Sass, которые можно использовать вместе с ним. Можно одновременно не использовать text-shadow, если линия подчеркивания достаточно тонкая или отличается от текста по цвету.

Для одиночных строк текста используйте border-bottom и любые другие свойства.

Для добавления разрывов ниже базовой линии текста на градиентных фонах или фоновых изображениях попробуйте использовать SVG-фильтры. А когда поддержка браузерами существенно улучшится, можно будет добиться нужного эффекта с помощью свойств text-decoration-*.

Перевод статьи «Styling Underlines on the Web» был подготовлен дружной командой проекта Сайтостроение от А до Я.