Подчёркивание бывает разного вида, соответственно, различаются методы его создания. Ниже перечислены несколько популярных.
Использование text-decoration
Свойство text-decoration со значением underline добавляет подчёркивание к тексту; такого рода подчёркивание можно наблюдать для ссылок по умолчанию. Созданная таким образом линия равна ширине текста и будет такого же цвета, что и сам заголовок. Изменить цвет линии можно через свойство text-decoration-color . В примере 1 показано применение text-decoration к элементу
.
Пример 1. Использование text-decoration
Результат данного примера показан на рис. 1.
Рис. 1. Вид линии, созданной через text-decoration
Браузеры IE и Edge не поддерживают свойство text-decoration-color .
Использование border-bottom
Свойство border-bottom добавляет к элементу снизу линию заданной толщины, цвета и стиля. Такая линия занимает всю доступную ширину, несмотря на длину текста заголовка (рис. 2).
Рис. 2. Вид линии, созданной с помощью border-bottom
Расстояние от линии до текста можно регулировать с помощью свойства padding-bottom , как показано в примере 2.
Пример 2. Использование border-bottom
Культурный речевой акт в XXI веке
Действительно, мифопорождающее текстовое устройство иллюстрирует дискурс, и это придает ему свое звучание, свой характер.
Чтобы линия была на ширину текста, достаточно заголовок превратить в строчно-блочный элемент, добавив к селектору h2 свойство display со значением inline-block .
Использование::after и content
Также можно сделать искусственную линию через комбинацию свойства content и псевдоэлемента ::after . Они лишь будут выводить пустой псевдоэлемент после заголовка, а уже вид этого псевдоэлемента определяется другими свойствами. На рис. 3 показана подобная линия.
Рис. 3. Линия, созданная через::after
Положение такой линии относительно текста задается через свойство bottom с отрицательным значением, цвет линии через свойство background . На деле это получается не линия, а прямоугольный блок, поэтому используем фоновую заливку (пример 3).
Пример 3. Использование::after
Культурный речевой акт в XXI веке
Действительно, мифопорождающее текстовое устройство иллюстрирует дискурс, и это придает ему свое звучание, свой характер.
Позволяет сделать разное подчеркивание в HTML нижнее (underline), верхнее (overline), перечеркнутый текст (line-through) и т.п. Совместим эту фишку с предыдущей и получится:
Во второй строке показано как все записывается в один ряд с text-decoration.
text-decoration-style — стиль подчеркивания текста
Опция задает внешний вид декоративной линии для / ссылки. В новых рекомендациях CSS были добавлены значения wavy и double, теперь их всего 5:
- solid — сплошная линия;
- double — двойная (из первого примера выше);
- dotted — состоит из последовательности точек;
- dashed — позволяет сделать пунктирное подчеркивание CSS;
- wavy — эффектная волнистая линия.
text-underline-position — позиционирование CSS подчеркивания
С помощь этого свойства можно управлять позицией линии относительно глифа шрифта.
Всего доступны 4 варианта:
- auto — располагается максимально близко базовой линии текста;
- under — под самой нижней границей шрифта;
- left и right — слева/справа для записей, отображаемых вертикально.
Вот наглядное отличие нижнего подчеркивания текста с помощью under и auto:
Разница, думаю, вполне очевидна.
text-decoration-skip — убираем подчеркивание для элементов
С помощью опции можно отменить (пропустить) декорирование некоторых элементов в HTML строке. Чтобы лучше понять допустимые значения spaces, objects, box-decoration, edges, ink продублирую картинку из прошлой заметки:
То есть, например, с помощью ink вы можете сделать нижнее подчеркивание в CSS, которое бы не пересекалось с символами . Значение objects позволяет пропускать инлайновые элементы (inline-block) — вставляете span, и сплошная линия прервется в соответствующем месте:
Параметры box-decoration, spaces, edges намного хуже поддерживаются браузерами, поэтому их результат иногда отличается от ожидаемого. Вот состояние по совместимости/поддержке text-decoration на момент написания статьи:
Дополнительные фишки для подчеркивания ссылок
Начинающие пользователи часто задают некоторые типовые вопросы по теме, поэтому мы также решили их рассмотреть. Общий пример находится в самом низу после пояснений.
Как убрать подчеркивание ссылки
a:hover { text-decoration: underline; }
Оба примера ниже позволяют понять логику работы при наведении: или вы изначально указываете в CSS подчеркивание ссылок, а потом убираете его в hover, либо наоборот.
Если будут еще какие-то вопросы по теме, задавайте их в комментариях. Постараемся рассмотреть позже или подсказать в ответах. Главное в этом деле практика — попробуйте добавить разные свойства для опции text-decoration непосредственно в примерах или создайте свой тестовый файл. Надеемся по теме подчеркивания текста и ссылок в CSS / HTML все стало ясно.
Существует куча разных способов оформления подчеркивания. Возможно, вы вспомните статью Марсина Вичари “Crafting link underlines” на Medium. Разработчики Medium не пытаются сделать что-то безумное , они просто хотят создать красивую линию под текстом.
Это самое простое подчеркивание, но у него правильный размер и оно не перекрывает выносные элементы букв . И оно однозначно лучше дефолтного подчеркивания в большинстве браузеров. Medium пришлось столкнуться со сложностями для достижения своего стиля в вебе. Два года спустя, нам все также сложно сделать красивое подчеркивание.
Цели
Что не так с привычным text-decoration: underline ? Если речь идет об идеальном сценарии, подчеркивание должно делать следующее:
- позиционироваться ниже базовой линии;
- пропускать выносные элементы;
- изменять цвет, толщину и стиль линии;
- работать с многострочным текстом;
- работать на любом фоне.
Я считаю, что это все разумные требования, но насколько я знаю, не существует интуитивного способа добиться этого с помощью CSS.
Подходы
Так что это за различные способы, которыми мы можем реализовать подчеркивание в вебе?
Вот те, которые я рассматриваю:
- text-decoration ;
- border-bottom ;
- box-shadow ;
- background-image ;
- фильтры SVG;
- Underline.js (canvas);
- text-decoration-* .
Разберем эти способы один за другим и поговорим о плюсах и минусах каждого из них.
text-decoration
text-decoration это самый очевидный способ подчеркивания текста. Вы применяете одно свойство и этого достаточно. На небольших размерах шрифта это может выглядеть вполне прилично, но увеличьте размер шрифта и такое подчеркивание начинает выглядеть неуклюже.
Самая большая проблема с text-decoration это отсутствие настроек. Вы ограничены цветом и размером шрифта текста и у вас нет кроссбраузерного способа изменить это. Мы еще поговорим об этом подробнее.
- легко использовать;
- позиционируется ниже базовой линии;
- по умолчанию пропускает нижние выносные элементы в Safari и iOS;
- подчеркивает многострочный текст;
- работает на любом фоне.
- не пропускает нижние выносные элементы во всех остальных браузерах;
- не позволяет изменять цвет, толщину или стиль линии.
border-bottom
border-bottom предлагает хороший баланс между простотой и настраиваемостью. Этот подход использует старое доброе свойство CSS для границы, это значит, что вы можете легко изменять цвет, толщину и стиль.
Вот так border-bottom выглядит у строчных элементов.
Главный недостаток - это расстояние линии подчеркивания от текста, она целиком ниже выносных элементов. Вы можете исправить это, задав элементам свойство inline-block и уменьшив line-height , но тогда вы потеряете возможность оборачивать текст. Хорошо для отдельных строчек, но больше нигде непригодно.
Дополнительно, мы можете использовать text-shadow , чтобы перекрыть часть линии рядом с подстрочными элементами, имитируя это при помощи того же цвета, что и фон. То есть эта техника работает только на простом одноцветном фоне, без градиентов, паттернов или изображений.
На данный момент мы уже используем целых четыре свойства для оформления одной строчки. Это намного больше работы, чем просто добавить text-decoration .
- может пропускать выносные элементы с помощью text-shadow ;
- может изменять цвет, жирность и стиль линии;
- позволяет использовать переходы и анимации цвета и жирности;
- работает с многострочным текстом, если не применено значение inline-block ;
- работает на любом фоне, если не использовать text-shadow .
- позиционируется слишком низко и перемещается сложным способом;
- используется много дополнительных свойств для правильной работы;
- при использовании text-shadow выделение текста выглядит уродливо.
box-shadow
box-shadow рисует подстрочную линию за счет двух внутренних теней: одна создает прямоугольник, а вторая скрывает его часть. Это значит, что вам нужен однотонный фон для того, чтобы это работало.
Вы можете использовать тот же трюк с text-shadow для заполнения пропусков между подчеркиванием и выносными элементами. Но если цвет подчеркивания отличается от цвета текста - или он просто достаточно тонкий, линия не будет сталкиваться с выносными элементами так, как при использовании text-decoration .
- позволяет изменять цвет и толщину линии;
- работает с многострочным текстом.
- не позволяет изменять стиль подчеркивания;
- работает не на любом фоне.
background-image
Метод с background-image наиболее близок к нашим желанием и обладает минимумом недостатков. Идея состоит в использовании linear-gradient и background-position для создания изображения, повторяющегося под строчками текста.
Для работы этого подхода необходимо, чтобы текст был в стандартном режиме display: inline; .
Следующий вариант обходится без linear-gradient , для эффектов вы можете добавить свое фоновое изображение.
- может позиционироваться ниже базовой линии;
- может пропускать выносные элементы за счет text-shadow ;
- работает с кастомными изображениями;
- обертывает несколько строчек текста;
- работает на любом фоне, если не применять text-shadow .
- размер изображения может изменяться в зависимости от разрешения экрана, браузера и увеличения.
Фильтры SVG
Я достаточно много поиграл с этим способом. Вы можете создать строчный фильтр SVG, который рисует линию и затем расширяет текст для маскировки части линии, которую мы хотим сделать прозрачной. Затем вы можете задать фильтру id и ссылаться на него в CSS примерно так filter: url(‘#svg-underline’) .
Преимущество этого подхода в том, что прозрачность достигается без применения text-shadow , то есть мы пропускаем выносные элементы на любом фоне, включая градиенты и фоновые изображения! Это работает только на отдельной строке текста, учитывайте это.
Вот как это выглядит в Chrome и Firefox:
Поддержка в IE, Edge и Safari проблематична. Сложно тестировать поддержку фильтра SVG в CSS. Вы можете использовать директиву @supports с filter , но это проверит лишь работу ссылки на фильтр, но не работу самого фильтра. Мои попытки завершились муторным определением возможностей браузера, это ощутимый недостаток метода.
- может позиционироваться ниже базовой линии;
- может пропускать выносные элементы;
- допускает изменение цвета, толщины и стиля линии;
- работает на любом фоне.
- не работает с многострочным текстом;
- не работает в IE, Edge и Safari, но вы можете использовать text-decoration в качестве запасного варианта, в Safari он смотриться достойно.
Underline.js (Canvas)
Underline.js завораживает. Я считаю впечатляющим то, что сделала Вентин Жанг за счет владения JavaScript и внимания к деталям. Если вы не видели техническое демо Underline.js, бросайте читать и уделите ему минуту времени. Есть также ее девятиминутный доклад о том, как это работает , но я опишу кратко: подчеркивание рисуется с помощью элементов
Несмотря броское название, Underline.js это всего лишь техническое демо. Это значит, что вы не можете просто взять и подключить это в свой проект без изменения кода.
Я решил упомянуть об этом в доказательство концепции, что
Новые свойства text-decoration
Вы помните, что я обещал подробнее поговорить о text-decoration . Время пришло.
Само по себе это свойство отлично работает, но вы можете добавить несколько экспериментальных свойств для настройки внешнего вида подчеркивания.
- text-decoration-color
- text-decoration-skip
- text-decoration-style
Но слишком сильно не радуйтесь… Поддержка в браузерах - как всегда. Такие дела.
text-decoration-color
Свойство text-decoration-color позволяет вам изменять цвет подчеркивания отдельно от цвета текста. Поддержка этого свойства лучше, чем можно было ожидать - оно работает в Firefox и с префиксом в Safari. Вот в чем загвоздка: если у вас есть выносные элементы, Safari поместит подчеркивание поверх текста.
text-decoration-skip
Свойство text-decoration-skip включает пропуск выносных элементов в подчеркиваемом тексте.
Это свойство нестандартное и работает сейчас только в Safari, с префиксом -webkit- . Safari по умолчанию активирует это свойство, поэтому выносные элементы всегда не перечеркиваются.
Если вы используете Normalize, то учтите, что последние версии отключают это свойство ради последовательного поведения браузеров. И если вы хотите, чтобы подчеркивание не затрагивало выносные элементы, вам надо вручную активировать его.
text-decoration-style
Свойство text-decoration-style предлагает такие же возможности оформления, что и у свойства border-style , добавляя кроме этого стиль wavy .
Вот список доступных значений:
- dashed
- dotted
- double
- solid
Сейчас свойство text-decoration-style работает только в Firefox, вот скриншот из него:
Чего не хватает
Серия свойств text-decoration-* намного более интуитивна в использовании, чем остальные свойства CSS для оформления подчеркивания. Но если взглянуть внимательнее, то для удовлетворения наших запросов не хватает способов задать толщину или позицию линии.
После небольшого исследования, я нашел еще пару свойств:
- text-underline-width
- text-underline-position
Судя по всему, они относятся к ранним черновикам CSS, но их так и не реализовали в браузерах из-за отсутствия интереса.
Выводы
Так какой же способ подчеркивания лучший?
Для небольшого текста я рекомендую использовать text-decoration с оптимистичным добавлением text-decoration-skip . Это выглядит немного безвкусно в большинстве браузеров, но подчеркивание в браузерах было таким всегда и люди просто не обратят внимания. Плюс всегда есть шанс, что при наличии у вас терпения, это подчеркивание когда-нибудь будет выглядеть хорошо без необходимости для вас что-то менять, так как это сделают в браузерах.
Для основного текста имеет смысл использовать background-image . Этот подход работает, выглядит замечательно и для него есть миксины Sass . Вы, в принципе, можете пропустить text-shadow , если подчеркивание тонкое или отличается цветом от текста.
Для отдельных строк текста используйте border-bottom вместе с любыми дополнительными свойствами.
А если вам нужен пропуск выносных элементов на фоне градиента или изображения, попробуйте использовать фильтры SVG. Или просто избегайте использовать подчеркивание.
В будущем, когда поддержка в браузерах станет лучше, единственным ответом будет набор свойств text-decoration-* .
Также рекомендую обратить внимание на статью Бенджамина Вудроффа CSS Underlines Suck , в которой рассматриваются те же вопросы.
