`text-decoration-thickness` CSS-свойство

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

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

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

Попробуйте

text-decoration-line: underline;
text-decoration-thickness: 3px;

text-decoration-line: line-through;
text-decoration-thickness: 0.4rem;

text-decoration-line: underline overline;
text-decoration-thickness: from-font;
font-size: 2rem;

<section id="default-example">
  <p id="example-element">
    Confusion kissed me on the cheek, and left a taste so bittersweet
  </p>
</section>

p {
  font: 1.5em sans-serif;
  text-decoration-color: red;
}

Синтаксис

/* 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
Применяется к	всем элементам
Наследуется	нет
Проценты	относятся к размеру шрифта самого элемента
Вычисленное значение	как задано
Тип анимации	по типу вычисленного значения

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

text-decoration-thickness = 
  auto |
  from-font |
  <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, уровень 4 # text-decoration-thickness-property

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

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

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

См. также

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