text-decoration-thickness

Базовая линия Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Свойство text-decoration-thickness CSS задаёт толщину линии декорации, используемой для текста в элементе, такой как зачёркивание, подчеркивание или надчёркивание.

Попробовать

Синтаксис

/* Single keyword */
text-decoration-thickness: auto;
text-decoration-thickness: from-font;

/* length */
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;

/* percentage */
text-decoration-thickness: 10%;

/* Global values */
text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: revert;
text-decoration-thickness: revert-layer;
text-decoration-thickness: unset;

Значения

auto: Браузер выбирает подходящую ширину для линии декорации текста.
from-font: Если файл шрифта содержит информацию о предпочтительной толщине, используется это значение. Если файл шрифта не содержит этой информации, ведёт себя так, как если бы было установлено auto, и браузер выбирает подходящую толщину.
<length>: Задает толщину линии декорации текста как <length>, переопределяя предложенное значение из файла шрифта или значение по умолчанию браузера.
<percentage>: Задает толщину линии декорации текста как <percentage> от 1em в текущем шрифте. Процентное значение наследуется как относительное значение, поэтому масштабируется при изменении шрифта. Браузер должен использовать минимум 1 пиксель устройства. Для данного применения свойства толщина постоянна по всему элементу, к которому оно применено, даже если есть дочерние элементы с разным размером шрифта.

Формальное определение

Начальное значение	`auto`
Применяется к	всем элементам. Также применяется к `::first-letter` и `::first-line`.
Наследуется	нет
Проценты	относительно размера шрифта самого элемента
Вычисленное значение	как указано
Тип анимации	по типу вычисленного значения

Формальный синтаксис

text-decoration-thickness = 
  auto                 |
  from-font            |
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Изменение толщины

HTML

<p class="thin">Here's some text with a 1px red underline.</p>
<p class="thick">This one has a 5px red underline.</p>
<p class="shorthand">This uses the equivalent shorthand.</p>

CSS

.thin {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 1px;
}

.thick {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 5px;
}

.shorthand {
  text-decoration: underline solid red 5px;
}

Результаты

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

Спецификация
CSS Text Decoration Module Level 4 # text-decoration-width-property

Примечание: Раньше свойство называлось text-decoration-width, но было обновлено в 2019 году на text-decoration-thickness.

Совместимость браузеров

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`text-decoration-thickness`	89 87–89 Свойство `text-decoration-thickness` не работает, если `text-underline-offset` установлено не в значение `auto` или `text-decoration-color` установлено не в значение `currentColor`. См. баг 40734940.	89 87–89 Свойство `text-decoration-thickness` не работает, если `text-underline-offset` установлено не в значение `auto` или `text-decoration-color` установлено не в значение `currentColor`. См. баг 40734940.	70	75 73–75 Свойство `text-decoration-thickness` не работает, если `text-underline-offset` установлено не в значение `auto` или `text-decoration-color` установлено не в значение `currentColor`. См. баг 40734940.	12.1	89 87–89 Свойство `text-decoration-thickness` не работает, если `text-underline-offset` установлено не в значение `auto` или `text-decoration-color` установлено не в значение `currentColor`. См. баг 40734940.	79	63 62–63 Свойство `text-decoration-thickness` не работает, если `text-underline-offset` установлено не в значение `auto` или `text-decoration-color` установлено не в значение `currentColor`. См. баг 40734940.	12.2	15.0 14.0–15.0 Свойство `text-decoration-thickness` не работает, если `text-underline-offset` установлено не в значение `auto` или `text-decoration-color` установлено не в значение `currentColor`. См. баг 40734940.	89 87–89 Свойство `text-decoration-thickness` не работает, если `text-underline-offset` установлено не в значение `auto` или `text-decoration-color` установлено не в значение `currentColor`. См. баг 40734940.
`auto`	87	87	70	73	12.1	87	79	62	12.2	14.0	87
`from-font`	87	87	70	73	12.1	87	79	62	12.2	14.0	87
`percentage`	87	87	74	73	17.4	87	79	62	17.4	14.0	87

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness