text-underline-offset

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

Свойство text-underline-offset задаёт смещение подчёркивания относительно его обычного положения. Оно помогает отделить линию ссылки от букв, особенно если у шрифта длинные нижние выносные элементы.

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

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

Меняйте расстояние от текста до подчёркивания. Толщина линии остаётся прежней.

Значение свойстваtext-underline-offset: auto;text-underline-offset: 2px;text-underline-offset: 0.2em;text-underline-offset: 0.4em;

text-underline-offset: auto

HTML и CSS примера

HTML

<div class="stage">
  <p class="demo-target">Прогулка с Тони</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 {
  font-size: 28px;
  text-decoration: underline #a13610 2px;
  text-underline-offset: 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 {
  font-size: 28px;
  text-decoration: underline #a13610 2px;
  text-underline-offset: 2px;
}

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 {
  font-size: 28px;
  text-decoration: underline #a13610 2px;
  text-underline-offset: 0.2em;
}

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 {
  font-size: 28px;
  text-decoration: underline #a13610 2px;
  text-underline-offset: 0.4em;
}

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

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

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

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

Совместимостьcss.properties.text-underline-offset
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`text-underline-offset`	✓87	✓87	✓70	✓73	✓12.1	✓87	✓79	✓62	✓12.2	✓14.0	✓87	✓12.2
`auto`	✓87	✓87	✓70	✓73	✓12.1	✓87	✓79	✓62	✓12.2	✓14.0	✓87	✓12.2
`percentage`	✓87	✓87	✓74	✓73	✓18.2	✓87	✓79	✓62	✓18.2	✓14.0	✓87	✓18.2

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

CSS синтаксис:

CSS

text-underline-offset: auto | <length-percentage>;

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

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

JavaScript синтаксис:

JavaScript

element.style.textUnderlineOffset = "0.2em";

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

auto.

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

Значения text-underline-offset
Значение	Описание
`auto`	Положение выбирает браузер с учётом шрифта. Начальное значение.
`<length>`	Смещение, например `3px` или `0.2em`. Положительное значение отодвигает линию от её исходного положения, отрицательное приближает в противоположном направлении.
`<percentage>`	Доля от `1em`. Процент наследуется как относительное значение и может дать разное смещение у потомков с разным размером шрифта.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для наследуемого свойства `text-underline-offset` наследует вычисленное значение у родительского элемента.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Положение и толщина — разные настройки

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

Толщину задаёт text-decoration-thickness. Положение базовой линии подчёркивания также связано с text-underline-position, а пропуски вокруг выступающих частей букв — с text-decoration-skip-ink. Нулевое смещение не обязательно означает пересечение букв: отсчёт идёт от положения, определённого правилами подчёркивания.

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

CSS Text Decoration — text-underline-offset.

Наследуется

Да.

Анимируемое

Да, как длина или процент; переход с auto — дискретный.

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

Линия дальше от букв

Сравните 0, 0.2em и 0.5em. Затем сделайте ссылку многострочной, сузив результат: слишком большое смещение начинает мешать следующей строке.

base.css

CSS

body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
a {
    display: inline;
    color: #1d4ed8;
    font-size: 24px;
    line-height: 1.6;
}
body {
    max-width: 24rem;
}

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="#forest">Прогулки по лесу: ручьи, тропы и укрытия бурундуков</a>
  </body>
</html>

style.css

CSS

a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}