Text underline css: text-decoration-color — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

text-decoration-style | CSS | WebReference

Устанавливает стиль декоративной линии, которая добавляется к тексту через свойство text-decoration или text-decoration-line.

Краткая информация

Значение по умолчаниюsolid
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяНет

Синтаксис

text-decoration-style: solid | double | dotted | dashed | wavy
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

solid
Одинарная линия.
double
Двойная линия.
dotted
Точечная линия.
dashed
Пунктирная линия.
wavy
Волнистая линия.

Песочница

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

И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

solid double dotted dashed wavy

div {
  color: #818991;
  text-decoration: underline;
  text-decoration-color: #084ca1;
  text-decoration-style: {{ playgroundValue }}px;
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>text-decoration-style</title> <style> a { text-decoration: underline; text-decoration-style: wavy; text-decoration-color: red; } </style> </head> <body> <a href=»page/1.html»>Ссылка с подчёркиванием</a> </body> </html>

Объектная модель

Объект.style.textDecorationStyle

Примечание

Firefox до версии 36 поддерживает свойство -moz-text-decoration-style.

Safari поддерживает свойство -webkit-text-decoration-style.

Спецификация

СпецификацияСтатус
CSS Text Decoration Module Level 3Возможная рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

7957448636
80636468
Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Текст и шрифт

См. также

  • text-decoration
  • text-decoration-color
  • text-decoration-line

Рецепты

  • Как сделать волнистое подчёркивание текста?

CSS-свойство text-underline-offset устанавливает дистанционное оформление (применяемое с помощью text-decoration)от его исходного положения.


Рекомендуется использовать единицы em, чтобы смещение масштабировалось вместе с размером шрифта. Определяет смещение подчеркивания как <процент> от 1 em в шрифте элемента. Процент наследуется как относительное значение и, следовательно, масштабируется при изменении шрифта.

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

Свойство text-decoration-line используется для подчеркивания текста.Это свойство имеет три значения:overline,underline или line-through.Так,значение underline используется для подчеркивания текста в CSS.


Свойство CSS text-underline-offset устанавливает расстояние смещения линии оформления подчеркнутого текста (примененной с помощью text-decoration ) от ее исходного положения.

Try it

text-underline-offset не является частью сокращения text-decoration . В то время как элемент может иметь несколько строк text-decoration text-underline-offset

подчеркивания текста влияет только на подчеркивание, но не на другие возможные варианты оформления строки, такие как overline или line-through .

Syntax

/ * Одно ключевое слово * /
text-underline-offset: auto;
/* длина */
text-underline-offset: 0.1em;
text-underline-offset: 3px;
/ * процент * /
text-underline-offset: 20%;
/ * Глобальные значения * /
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: revert-layer;
text-underline-offset: unset;

Свойство text-underline-offset указывается как одно значение из списка ниже.

Values

auto

Браузер выбирает соответствующее смещение для подчеркиваний.

<length>

Задает смещение подчеркивания как <length>

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

<percentage>

Определяет смещение подчеркивания как <percentage> от 1 эм в шрифте элемента. Процент наследуется как относительное значение и, следовательно, масштабируется с изменением шрифта. Для данного применения этого свойства смещение является постоянным по всему блоку, к которому применяется подчеркивание, даже если есть дочерние элементы с разными размерами шрифта или вертикальным выравниванием.

Formal definition

Initial valueauto
Applies toвсе элементы. Это также относится к ::first-letter и ::first-line .
Inheritedyes
Percentagesуказать размер шрифта самого элемента
Computed valueas specified
Animation typeпо типу вычисленной стоимости

Formal syntax

text-underline-offset =   auto          |  <length>      |  <percentage>

Examples

Демонстрация функции text-underline-offset

<p>Hereтекст со смещенной волнистой красной линией подчеркивания! </p>
<br>
<p>This text has lines both above and below it.  Only the bottom one is offset.</p>

p {
  text-decoration: underline wavy red;
  text-underline-offset: 1em;
}
.twolines {
  text-decoration-color: purple;
  text-decoration-line: underline overline;
}

Specifications

Specification
Модуль оформления текста CSS, уровень 4
# underline-offset

Browser compatibility

DesktopMobile
ChromeEdgeFirefox
Internet Explorer		OperaSafariWebView AndroidChrome AndroidFirefox для AndroidOpera AndroidSafari на IOSSamsung Internet
text-underline-offset

87

87

70

No

73

12.1

87

87

No

No

12. 2

14.0

percentage

No

No

74

No

No

No

No

No

No

No

No

No

See also

  • text-decoration
  • text-decoration-thickness

CSS

  • text-transform

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

  • Пример использования «полной ширины» (японская катакана половинной ширины)

    Японская катакана половинной ширины использовалась для представления 8-битных кодов символов.

  • text-underline-position

    CSS-свойство text-underline-position определяет,какое из них задается с помощью значения text-decoration.

  • <time>

    Тип данных CSS <time> представляет значение, выраженное в секундах или миллисекундах.

  • 1
  • …
  • 796
  • 797
  • 798
  • 799
  • 800
  • …
  • 857
  • Next

Подчеркивание текста в CSS

Свойство CSS text-underline-position устанавливает позицию подчеркивания, указанную в элементе.

Свойство text-underline-position используется в сочетании со свойством text-decoration-line (или сокращенным свойством text-decoration ), чтобы определить, где должна появиться строка.

Если указано слева или справа , подразумевается под .

Синтаксис

позиция подчеркивания текста: авто | [ под || [ слева | справа ] ]

Возможные значения

авто
Браузер/агент пользователя может использовать любой алгоритм для определения позиции подчеркивания; однако он должен быть размещен на уровне алфавитной базовой линии или под ней.
ниже
Подчеркивание расположено под текстовым содержимым элемента. В этом случае подчеркивание обычно не пересекает выносные элементы. Это иногда называют «бухгалтерским» подчеркиванием. Это ниже, чем обычное «алфавитное» подчеркивание. Это значение можно комбинировать с слева или справа , если в режимах вертикального письма предпочтительна определенная сторона.
слева
Используется при представлении текста в режиме вертикального письма (например, текст читается вертикально сверху вниз или наоборот).

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

справа
Используется при представлении текста в режиме вертикального письма (например, текст читается вертикально сверху вниз или наоборот).

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

Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:

начальный
Представляет значение, указанное как начальное значение свойства.
унаследовать
Представляет вычисленное значение свойства родительского элемента.
снято с охраны
Это значение действует как inherit или initial , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.

Основная информация о свойствах

Исходное значение
авто
Применяется к
Все элементы
Унаследовано?
Да
СМИ
Визуальный
Анимируемый
№

Пример кода

Базовый CSS

Вот пример простого объявления. Объявление состоит из свойства и его значения.

text-underline-position: under;

Рабочий пример в документе HTML

Пример <стиль> ч2 { шрифт: 100 3em без засечек; оформление текста: подчеркивание; позиция подчеркивания текста: под; }

Пример

Попробуй

Спецификации CSS

  • Свойство text-underline-position определено в модуле оформления текста CSS уровня 3 (кандидатская рекомендация W3C от 1 августа 2013 г. ).

Поддержка браузера

В следующей таблице, предоставленной Caniuse.com, показан уровень поддержки этой функции браузерами.

Префиксы поставщиков

Для максимальной совместимости с браузерами многие веб-разработчики добавляют свойства для конкретных браузеров, используя такие расширения, как -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- . для Firefox, -o- для более старых версий Opera и т. д. Как и в случае любого свойства CSS, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.

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

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

Многие разработчики используют Autoprefixer, постпроцессор для CSS. Autoprefixer автоматически добавляет префиксы поставщиков в ваш CSS, поэтому вам это не нужно. Он также удаляет старые ненужные префиксы из вашего CSS.

Вы также можете использовать Autoprefixer с такими препроцессорами, как Less и Sass.

css — Управление положением подчеркивания в оформлении текста: подчеркивание

спросил

Изменено 1 месяц назад

Просмотрено 110 тысяч раз

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

 Пример ссылки

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

  • css
  • подчеркивание

2020

Используйте text-underline-offset !

2012

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

 а {
    нижняя граница: 1px сплошной currentColor; /* Или любой другой цвет */
    текстовое оформление: нет;
}

Вот демо. Если этого места недостаточно, вы можете легко добавить больше — если слишком много, это немного менее удобно.

6

Вы можете использовать псевдо до и после вот так. Он хорошо работает и полностью настраивается.

УСБ 

 р {
  высота строки: 1,6;
}
.подчеркнуть {
   текстовое оформление: нет;
   положение: родственник;
 }
. подчеркивание: после {
    положение: абсолютное;
    высота: 1 пиксель;
    поле: 0 авто;
    содержание: '';
    слева: 0;
    справа: 0;
    ширина: 90%;
    цвет: #000;
    цвет фона: красный;
    слева: 0;
    внизу: -3px; /* настроить это для перемещения вверх и вниз. вам, возможно, придется отрегулировать высоту строки абзаца, если вы сильно сместите его вниз. */
}

HTML 

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

Вот более продвинутая демонстрация с приложенным снимком экрана, который я сделал, который анимирует подчеркивание на зависает, меняет цвета и т.д…

http://codepen.io/bootstrapped/details/yJqbPa/

4

В CSS 3 есть предлагаемое свойство text-underline-position , но похоже, что оно еще не реализовано ни в одном браузере.

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

Обратите внимание, что подчеркивание не добавляется к общей высоте элемента, но добавляется нижняя граница. В некоторых ситуациях вы можете вместо этого использовать контур-нижний , который не добавляется к общей высоте (хотя он не так широко поддерживается, как граница-нижний).

1

Существует свойство text-underline-offset в модуле оформления текста CSS уровня 4, которое позволяет перемещать оформление на указанное расстояние от его исходного положения.

Поддерживается в Safari 12.1+, Firefox 70+ и Chrome 87+ (выпущено 17 ноября 2020 г.).

text-underline-offset свойство принимает следующие значения:

  • auto — по умолчанию, заставляет браузер выбрать соответствующее смещение.
  • from-font — если используемый шрифт указывает предпочтительное смещение, используйте его, в противном случае он возвращается к auto .
  • — указать расстояние в «обычных» единицах длины CSS. Используйте em , чтобы обеспечить пропорциональное масштабирование с размером шрифта .

Пример ниже: 

 p {
  оформление текста: подчеркивание;
  цвет оформления текста: красный;
  нижняя граница: 1.5em;
}
р.тест {
  положение: родственник;
}
p.test::после {
  положение: абсолютное;
  содержание: '';
  дисплей: блок;
  высота: 1 пиксель;
  ширина: 100%;
  фон: синий;
  внизу: 0;
} 
 

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




  А теперь давайте попробуем это с `text-underline-offset`, установленным на `auto`.




  С `text-underline-offset`, установленным в `from-font`, это, вероятно, выглядит так же, как и выше.

2

вы можете использовать text-underline-position: under; 

 <тело>
   

     
<а href="#"
       >
      Моя ссылка

для получения более подробной информации посетите https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position

Используйте нижнюю границу вместо подчеркивания

 a{
    нижняя граница: 1px сплошная #000;
    отступ снизу: 2px;
}

Измените padding-bottom, чтобы настроить пространство

Использование border-bottom-width и border-bottom-style сделает рамку того же цвета, что и текст по умолчанию:

 text-decoration: none;
ширина нижней границы: 1px;
нижняя граница: сплошная;
отступ снизу: 1px;

Есть одно свойство text-underline-position: under . Но поддерживается только в Chrome и IE 10+.

Подробнее: https://css-tricks.com/almanac/properties/t/text-underline-position/ https://developer.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *