text-decoration в CSS


Содержание

Свойство CSS text-decoration

Свойство CSS text-decoration отвечает за оформление текста в плане подчеркиваний. Можно сделать нижнее, верхнее подчеркивание. Также можно зачеркнуть текст или применить все подчеркивания сразу.

Синтаксис CSS text-decoration

  • none — текст без оформления
  • underline — нижнее подчеркивание
  • overline — верхнее подчеркивание
  • line-through — зачеркивание текста
  • blink — мерцающий текст (рекомендуется не применять это значение)

Можно указать несколько значений. Например

Как изменить стиль и цвет подчеркивания

Для изменения стиля подчеркивания есть специальное свойство text-decoration-style :

  • solid — сплошное подчеркивание
  • double — двойная линия
  • dotted — пунктирная линия
  • dashed — штриховая линия
  • wavy — волнистая линия

Для изменения цвета подчеркивания служит свойство text-decoration-color :

color может принимать значения в виде RGB, названия цвета (см. коды и названия html цветов для сайта)

К сожалению, свойство text-decoration-style и text-decoration-color не поддерживается почти всеми браузерами (идет уже 2020 год).

Способы подчеркивания в CSS

12 Октября 2020

Существует куча разных способов оформления подчеркивания. Возможно, вы вспомните статью Марсина Вичари “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 .

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

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 это всего лишь техническое демо. Это значит, что вы не можете просто взять и подключить это в свой проект без изменения кода.

Я решил упомянуть об этом в доказательство концепции, что обладает потенциалом создания прекрасных интерактивных подчеркиваний, но чтобы это заработало, вам надо писать свой JavaScript.

Новые свойства 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 .

Вот список доступных значений:

Сейчас свойство text-decoration-style работает только в Firefox, вот скриншот из него:

Чего не хватает

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

Илон Маск рекомендует:  Сервисы, WEB-сервисы, online-service

После небольшого исследования, я нашел еще пару свойств:

Судя по всему, они относятся к ранним черновикам CSS, но их так и не реализовали в браузерах из-за отсутствия интереса.

Выводы

Так какой же способ подчеркивания лучший?

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

Для основного текста имеет смысл использовать background-image . Этот подход работает, выглядит замечательно и для него есть миксины Sass. Вы, в принципе, можете пропустить text-shadow , если подчеркивание тонкое или отличается цветом от текста.

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

А если вам нужен пропуск выносных элементов на фоне градиента или изображения, попробуйте использовать фильтры SVG. Или просто избегайте использовать подчеркивание.

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

Также рекомендую обратить внимание на статью Бенджамина Вудроффа CSS Underlines Suck, в которой рассматриваются те же вопросы.

Стили подчеркивания в интернете

Существует множество различных способов задать подчеркивание текста 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 :

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

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

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

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

Underline.js (canvas)

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

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

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

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

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

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

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

TEXT-DECORATION-COLOR

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

TEXT-DECORATION-SKIP

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

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

TEXT-DECORATION-STYLE

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

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

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

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

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

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

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

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

Вывод

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

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

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

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

Данная публикация представляет собой перевод статьи « Styling Underlines on the Web » , подготовленной дружной командой проекта Интернет-технологии.ру

Свойство text-decoration, подчёркивание и другие эффекты

Дополнительное оформление текста можно задать с помощью свойства text-decoration . Вот его значения:

  1. underline — подчёркивание;
  2. line-through — зачёркивание;
  3. overline — надчёркивание;
  4. none — убирает вышеперечисленные эффекты.

К тексту можно одновременно применить несколько эффектов, если перечислить значения через пробел:

Свойство text-decoration — составное, а это значит, что его можно разложить на следующие свойства:

  • text-decoration-line — вид линии: зачёркивание, подчёркивание или надчёркивание;
  • text-decoration-style — стиль линии, может принимать значения:
    • solid — сплошная линия;
    • double — двойная линия;
    • dotted — точечная линия;
    • dashed — пунктирная линия;
    • wavy — волнистая линия.
  • text-decoration-color — цвет линии.
  • index.html Сплит-режим
  • style.css Сплит-режим

День одиннадцатый. Без фанатизма

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

The CSS Text-Decoration Property

Contents

Using text decorations in CSS

The CSS text-decoration property specifies visual decorative lines for text:

This property is actually a shorthand for four subproperties:

  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-thickness
Илон Маск рекомендует:  Что такое код poly полином

As with all shorthands, you need to list the values without naming the subproperties:

text-decoration: color line style thickness;

You don’t need to define all the values for the shorthand to work – it will work with even a single value:

In the following sections, we will explain each subproperty individually.

Modifying the CSS text decoration line

Using the CSS text-decoration-line property allows you to specify what kind of line the text decoration is going to use:

The syntax for this property is simple:

You may combine different possible values in one statement as well.

Value Description
none The default value. No text decoration line is displayed
underline Makes CSS underline text
overline Makes CSS overline text
line-through Makes CSS draw a line across text
blink A deprecated value. Made the text blink in CSS

Coloring the decoration line

The CSS text-decoration-color allows you to set the color for CSS underlines, overlines, and line-throughs:

The syntax for this property is almost the same as the ones discussed above:

Tip: to get the value for the exact color tone you need, use the Pickeristic color picker.


Theory is great, but we recommend digging deeper!
Learn Web Design: The Ultimate Gu >LearnToProgram

Styling CSS text decorations

The CSS text-decoration-style allows you to define how to display the text decoration line:

The syntax for this property is as follows:

All the available values are listed in the table below.

Value Description
solid The default value. Displays as a single straight line
double Display a double line
dotted Display a dotted line
dashed Display a dashed line
wavy Display a wavy line

Defining line thickness

The last CSS text decoration subproperty is called text-decoration-thickness . It sets the width of the decoration line:

You can define the thickness in either length units or keywords:

  • auto is the default value which makes the browser choose the line thickness
  • from-font chooses the thickness according to the font-size

Note: CSS text-decoration-thickness is an experimental property, so be aware of lower browser support.

text-decoration

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

Хотя text-decoration и не наследуется, оно распространяет свое действие на текст всех потомков элемента, которые находятся в прямом потоке HTML-страницы. А вот если какие-то потомки являются всплывающими (float), абсолютно позиционированными (position) либо имеют значение свойства display равное inline-table или inline-block , то на них данное свойство не действует.

Тип свойства

Применяется: ко всем элементам.

Значения

Значением свойства text-decoration является ключевое слово none или inherit либо одно или несколько (через пробел) ключевых слов задающих стили оформления.

  • underline — подчеркивает текст элемента.
  • overline — надчеркивает текст, то есть рисует над ним линию.
  • line-through — отображается зачеркнутый текст.
  • blink — текст элемента мигает (мерцает), то есть кратковременно исчезает и вновь появляется.
  • none — отменяет все эффекты оформления.
  • inherit — наследует значение text-decoration от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: none, однако браузеры по умолчанию подчеркивают текст у ссылок.

Цвет линий подчеркивания, надчеркивания или зачеркивания всегда соответствует цвету текста элемента (color) к которому применялось text-decoration . То есть даже если у потомков будет другой цвет текста, то цвет линий при этом не изменится.

Синтаксис

Пример CSS: использование text-decoration

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Да Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: До 9.0 9.0 и выше 2.0 и выше До 4.0 4.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Частично Частично Да Частично Частично

Internet Explorer 6.0 и 7.0 не понимают значение inherit .

IE до версии 9.0, Chrome и Safari не поддерживают значение blink .

Opera применяет значение blink только к тексту самого элемента, но не его потомков.

Chrome, Safari, Firefox до версии 4.0 не применяют данное свойство к потомку элемента, если этот потомок является HTML-таблицей.

IE 6.0 и 7.0, Chrome, Safari, Firefox до версии 4.0 применяют text-decoration к потомкам элемента, даже если они являются всплывающими, встроенными блоками (inline-block) или абсолютно позицонированными — ошибка.

Перечёркнутый текст

Первыми тегами для зачёркнутого текста были и .

C приходом HTML 4 их использование стало осуждается, а в HTML 5 их вовсе запретили. В место них ввели , он помечает текст как удаленный, что семантически правильнее.

По виду они не отличается:

Изменить цвет линии

Первый способ

С помощью CSS свойства text-decoration-color , который задаёт цвет линии (не поддерживается в Internet Explorer и Edge).

Также можно изменить стиль линии с помощью text-decoration-style .

Значение Описание Пример
text-decoration-style: solid; Одинарная линия Текст
text-decoration-style: double; Двойная линия Текст
text-decoration-style: dotted; Точечная линия Текст
text-decoration-style: dashed; Пунктирная линия Текст
text-decoration-style: wavy; Волнистая линия Текст

Второй способ

Тегу задается цвет линии, вложенному цвет текста.

Третий способ

Линия добавляется псевдо элементом :before , но у текста не должно быть переносов.

CSS text-decoration Property

Example

Set different text decorations for

elements:

h1 <
text-decoration: overline;
>

h2 <
text-decoration: line-through;
>

h3 <
text-decoration: underline;
>

h4 <
text-decoration: underline overline;
>

More «Try it Yourself» examples below.

Definition and Usage

The text-decoration property specifies the decoration added to text, and is a shorthand property for:

  • text-decoration-line (required)
  • text-decoration-color
  • text-decoration-style
Default value: none currentcolor solid
Inherited: no
Animatable: no, see individual properties. Read about animatable
Version: CSS1, renewed in CSS3
JavaScript syntax: object.style.textDecoration=»underline» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
text-decoration 1.0 3.0 1.0 1.0 3.5

CSS Syntax

Property Values

Value Description
text-decoration-line Sets the kind of text decoration to use (like underline, overline, line-through)
text-decoration-color Sets the color of the text decoration
text-decoration-style Sets the style of the text decoration (like solid, wavy, dotted, dashed, double)
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Add more text decoration:

h1 <
text-decoration: underline overline dotted red;
>

h2 <
text-decoration: underline overline wavy blue;
>

COLOR PICKER

HOW TO

SHARE

CERTIFICATES

Your Suggestion:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Web Certificates

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

Стилизация подчеркиваний

Дата публикации: 2020-11-02

От автора: стилизация подчеркиваний ссылок – довольно сложное занятие, и я постоянно забываю, какой способ лучше подходит в той или иной ситуации. К счастью, Джон Джеймсон поможет нам быстро разобраться в этом в своей статье.

Существует множество способов, как стилизовать подчеркивания. Возможно, вы помните статью «создаем подчеркивания ссылок на Medium». Medium не пытались делать что-то из рамок вон выходящее, они хотели просто создать привлекательные подчеркивания в тексте.

Тонкие, черные подчеркивания с пробелами вокруг букв с нижними выносками – работа Марсин Витчэри из статьи создаем подчеркивания ссылок на Medium.

Хорошее стандартное подчеркивание, которое к тому же имеет хороший размер и пропускает нижние выносные части букв. Намного лучше, чем в большинстве браузеров по умолчанию. Как оказалось, Medium столкнулись с множеством проблем на своем пути. И даже два года спустя до сих пор хорошая стилизация подчеркиваний вызывает много проблем.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Почему бы просто не использовать text-decoration: underline? Если мы говорим об идеальном сценарии, подчеркивания должны:

располагаться ниже базовой линии;

пропускать нижние выносные части букв;

менять цвет, толщину и стили;

переходить на новую строку;

работать с любыми фонами.

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

Подходы

Так какие способы есть в нашем распоряжении для подчеркивания текста? Я вспомнил следующие:

Пройдемся по всему списку и рассмотрим все плюсы и минусы каждого подхода.

Свойство text-decoration

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

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


Плюсы

располагается ниже базовой линии;

пропускает нижние выносные части букв по умолчанию в Safari и iOS;

перепрыгивает на новую строку;

работает с любыми фонами.

Минусы

не пропускает выносные нижние части букв в остальных браузерах;

нельзя менять цвет, толщину и стили.

Свойство border-bottom

Свойство border-bottom – хороший баланс скорости и кастомизации. Данный подход использует проверенные CSS рамки, а значит, вы с легкостью можете менять цвет, толщину и стили. Так выглядит свойство border-bottom на инлайновых элементах:

Самый большой минус – это то, насколько далеко подчеркивание расположено от текста. Подчеркивание расположено ниже нижних выносных частей букв. Данная проблема решается, если сделать элемент inline-block и уменьшить line-height, но тогда теряется возможность перепрыгивать на новые строки. Хорошо подходит для одиночных строк, но не более.

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

На данный момент существует 4 свойства для стилизации подчеркивания. Намного лучше, чем просто text-decoration.

Плюсы

можно пропускать нижние выноски с помощью text-shadow;

можно менять цвет, толщину и стили;

можно использовать свойство transition и анимировать цвет и толщину;

перепрыгивает на новые строки по умолчанию, если элемент не inline-block;

работает с любым фоном, если не использовать text-shadow.

Минусы

линия расположена очень далеко и ее сложно передвинуть;

слишком много лишних свойств нужно задействовать, чтобы подчеркивание хорошо смотрелось;

плохое выделение текста при использовании text-shadow.

Свойство box-shadow

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

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

Плюсы

можно расположить под базовой линией;

можно пропускать выноски с помощью text-shadow;

можно менять цвет и толщину;

перепрыгивает на новые строки.

Минусы

нельзя менять стили;

не работает со всеми фонами.

Свойство background-image

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Демо ниже не использует linear-gradient. Для создания крутого эффекта, можете использовать свое изображение.

Плюсы

можно расположить ниже базовой линии;

можно пропускать нижние выноски с помощью text-shadow;

можно менять цвет, толщину (даже на полпикселя) и стили;

работает с пользовательскими изображениями;

перепрыгивает на новые строки;

работает с любым фоном, если не использовать text-shadow.

Минусы

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

SVG фильтры

Вот с этим методом я игрался. Вы можете создать инлайновый SVG элемент filter, который будет рисовать линию, и расширить текст, чтобы замаскировать те части линии, которые должны быть прозрачными. Фильтру можно присвоить id и ссылаться на него в CSS с помощью filter: url(‘#svg-underline’).

В чем тут плюс – фильтр добавляет прозрачность, не полагаясь на text-shadow. То есть вы можете пропускать нижние выноски букв на любом фоне, в том числе градиентах и изображениях! Пример ниже работает только с одной строкой текста, так что осторожнее.

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

В IE, Edge и Safari с поддержкой возникают проблемы. В CSS сложно тестировать поддержку SVG фильтров. Можно использовать правило @supports на filter, но так вы проверите только работу самой ссылки, а не то, применился ли фильтр или нет. Мой способ довольно грубо работает с браузерами, так что будьте вдвойне осторожнее.

Плюсы

расположен ниже базовой линии;

пропускает нижние выноски;

можно менять цвет, толщину и стили;

работает на любом фоне.

Минусы

не перепрыгивает на новые строки;

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

Underline.js (Canvas)

Underline.js – удивительная библиотека. Меня впечатляет, что Wenting Zhang смогли сделать с JS и вниманием к деталям. Если вы еще не видели техническое демо Underline.js, остановитесь на минутку и посмотрите. В сети есть замечательное девятиминутное выступление на тему принципов работы, я вам сейчас быстро его перескажу. Подчеркивания рисуются с помощью canvas. Совершенно новый подход, который на удивление хорошо работает.

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

Эту библиотеку стоит упомянуть только лишь, как доказательство концепции. У canvas есть потенциал для создания красивых, интерактивных подчеркиваний, но для правильной работы вам придется написать дополнительный JS код.

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

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

Не радуйтесь раньше времени, вы же знаете о поддержке в браузерах.

Свойство text-decoration-color

Свойство text-decoration-color позволяет менять цвет подчеркивания отдельно от цвета текста. У свойства даже неплохая поддержка в браузерах. Оно работает в Firefox и с префиксом в Safari. Есть свой минус – если вы не очищаете линию вокруг выносок, в Safari она ложится поверх текста. Firefox:

Свойство text-decoration-skip

Свойство text-decoration-skip отвечает за пропуск нижних выносок в подчеркиваемом тексте.

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

Если вы используете Normalize, вам нужно знать, что последние версии отключают свойство для нормальной работы во всех браузерах. Если вы хотите вернуть эти почти магические подчеркивания, вам нужно включить данное свойство.

Свойство text-decoration-style

Свойство text-decoration-style предлагает тот же набор подчеркиваний, что и свойство border-style, но также добавляет новый вид – wavy. Возможные значения:

Прямо сейчас свойство text-decoration-style работает только в Firefox, ниже показан скриншот:

Набор однотонных подчеркиваний Выглядит похоже?

Что не так?

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

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

Выводы

Так как же лучше всего подчеркивать текст? Все зависит от разных факторов.

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

Для основного текста используйте background-image. Метод работает, смотрится красиво, и для него есть Sass миксины. Если подчеркивание тонкое, или цвет отличается от текста, скорее всего, вы можете пропустить метод с text-shadow. Для текста на одной строке используйте border-bottom и любые другие свойства.

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

Автор: John Jameson

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

lsreg’s IT blog

Существует несколько способов реализовать подчеркивание в CSS. Форматирование текста в CSS реализуется с помощью свойства text-decoration. Оно позволяет реализовать подчеркнутый текст в CSS. Для этого необходимо установить значение underline. Если текст родительского элемента уже подчеркнут, можно также использовать значение inherit.
Например, этот код сначала убирает подчеркивание (с помощю значения none) ссылки, а потом – добавляет, если посетитель сайта наводит на нее мышью.

Плюсы стандартного метода следующие:

  1. Простота.
  2. Может подчеркивать многострочный текст.
  3. Используется на любом фоне.

Для примитивной реализации подчеркивания этого способа достаточно, но есть еще некоторые методы.

Другие способы подчеркивания в CSS

Стандартный метод хорош, но лишь для ограниченного количества возможностей. Так, с помощью этого метода невозможно изменять стиль линии. Также такое подчеркивание плохо выглядит на большом размере шрифта. Кроме этого, он не пропускает нижние выносные элементы почти в любом браузере (исключение – Safari для Mac и iOS).

border-bottom

Это старое свойство, позволяющее изменять нижнюю границу текста. Это свойство css подчеркивает текст пунктиром, сплошной линией и как душе угодно. Также метод позволяет регулировать толщину подчеркивания. Пример кода с использованием свойства border-bottom у строчных элементов.

Результат интерпретации браузером этого кода.

Недостаток способа – подчеркивание осуществляется слишком низко по сравнению с текстом, поэтому линия (или пунктир) появляются уже под выносными элементами. Чтобы исправить это, можно использовать свойство text-shadow, использовав цвет фона в качестве цвета тени. Но выделение будет очень уродливым.
Также верстальщик имеет возможность применять переходы и анимации к подстрочной линии. Например, можно реализовать изменение цвета в течение какого-то времени. Если не использовать для пропуска выносных элементов свойство text-shadow, свойство может работать на любом фоне.

box-shadow

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

  1. Возможность позиционировать подчеркивание ниже базовой линии.
  2. Возможность изменять цвет и толщину линии.
  3. Можно использовать вместе с многострочным текстом.

Но у этого способа есть недостатки. Прежде всего, ограниченность в фоне. Также невозможно регулировать стиль подчеркивания.
Пример кода:

background-image

Этот метод почти не имеет недостатков, а его потенциал воистину огромен. Идея проста – создание радиального градиента совместно со свойством background-position. Это позволит создать изображение, которое будет находиться под текстом и повторяться по всей длине строчки.
Чтобы реализовать работу данного подхода, необходимо прописать режим отображения display: inline;
Выглядит это так.

Этот код, примененный к элементу, реализует подчеркивание длинным пунктиром. Если же точки остановки градиента установить в 50%, а не 75, то подчеркивание будет квадратиками. Свойство background-position в этом случае размещает фон под текстом, а background-repeat заставляет его повторяться.
Вместо градиента можно использовать готовое фоновое изображение и реализовать, например, подчеркивание звездочками.

Единственный недостаток – размер подчеркивания может отличаться в зависимости от используемого браузера, разрешения экрана и масштабирования.

Илон Маск рекомендует:  Шаблон сайта семья HTML, CSS, 1 страница
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL