text-decoration-thickness

Определение и применение

Свойство text-decoration-thickness задаёт толщину линий оформления текста: подчёркивания, надчёркивания и зачёркивания. Оно помогает сделать ссылку заметной без изменения толщины самих букв.

Как настроить толщину и положение подчёркивания — в уроке «Форматирование текста в CSS».

Попробуйте значения text-decoration-thickness

Меняйте толщину подчёркивания. При значении в em она зависит от размера шрифта; расстояние до текста остаётся прежним.

Значение свойстваtext-decoration-thickness: auto;text-decoration-thickness: 1px;text-decoration-thickness: 3px;text-decoration-thickness: 0.15em;

Что меняем

text-decoration-thickness: auto

HTML и CSS примера

HTML

<div class="stage">
  <p class="demo-target" style="font-size: 22px">Прогулка с Тони</p>
</div>

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  text-decoration-line: underline;
  text-decoration-color: #a13610;
  text-underline-offset: 0.2em;
  text-decoration-thickness: auto;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  text-decoration-line: underline;
  text-decoration-color: #a13610;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  text-decoration-line: underline;
  text-decoration-color: #a13610;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 3px;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  text-decoration-line: underline;
  text-decoration-color: #a13610;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.15em;
}

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

Спецификация: CSS text-decor-4

Поддерживается во всех основных браузерах с 2021 года.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.text-decoration-thickness
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`text-decoration-thickness`	✓89	✓89	✓70	✓75	✓12.1	✓89	✓79	✓63	✓12.2	✓15.0	✓89	✓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

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Ключевые слова hairline, thin, medium, thick из нового синтаксиса требуют отдельной проверки поддержки.

CSS синтаксис:

CSS

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

/* Новые ключевые слова: поддержка ограничена */
text-decoration-thickness: hairline | thin | medium | thick;

/* Глобальные значения */
text-decoration-thickness: initial | inherit | unset | revert | revert-layer;

| разделяет варианты. <length-percentage> — длина или процент относительно размера шрифта.

JavaScript синтаксис:

JavaScript

element.style.textDecorationThickness = "0.12em";

Начальное значение свойства

auto.

Значения свойства

Значения text-decoration-thickness
Значение	Описание
`auto`	Браузер выбирает подходящую толщину. Начальное значение.
`from-font`	Берёт рекомендованную толщину из шрифта; если таких данных нет, действует как `auto`.
`<length>`	Задаёт толщину, например `2px` или `0.1em`. Браузер сохраняет минимально видимую линию, поэтому нулевое значение не заменяет отключение оформления.
`<percentage>`	Процент от `1em`, то есть размера шрифта. Например, `10%` при шрифте `20px` соответствует `2px`.
`hairline, thin, medium, thick`	Новые значения толщины из спецификации: минимальная линия либо тонкая, средняя, толстая. Поддержка ограничена; для рабочего оформления используйте длину или процент.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `text-decoration-thickness` устанавливает его начальное значение свойства.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Сначала включите линию

Само свойство не рисует подчёркивание. Задайте text-decoration-line: underline или соответствующее сокращение text-decoration. Расстояние от букв до подчёркивания задаёт text-underline-offset, а цвет — text-decoration-color.

Свойство не наследуется, но линия, созданная у предка, распространяется через его текстовых потомков. Поэтому изменение толщины у вложенного span не обязано менять линию родителя. Задавайте оформление тому элементу, который создаёт нужную линию. Чтобы убрать линию у ссылки, используйте text-decoration: none, а не нулевую толщину.

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

CSS Text Decoration — text-decoration-thickness.

Наследуется

Нет.

Анимируемое

Да, как длина или процент. Переходы с ключевыми словами auto и from-font — дискретные.

Примеры, попробуйте сами

Толщина подчёркивания ссылки

Измените 0.12em на 0.25em, затем на from-font. Увеличьте размер шрифта: толщина в em изменится вместе с буквами, а значение в px останется фиксированным.

base.css

CSS

body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
a {
    color: #1d4ed8;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Толщина подчёркивания ссылки</title>
  </head>
  <body>
    <a href="#walks">Маршруты лесных прогулок</a>
  </body>
</html>

style.css

CSS

a {
    font-size: 24px;
    text-decoration-line: underline;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.2em;
}