Свойство CSS `text-underline-offset`

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

text-underline-offset не входит в сокращённое свойство text-decoration. Хотя у элемента может быть несколько линий text-decoration, text-underline-offset влияет только на подчёркивание, но не на другие возможные варианты оформления линиями, такие как overline или line-through.

Попробуйте

text-underline-offset: auto;

text-underline-offset: 8px;

text-underline-offset: -0.5rem;

<section id="default-example">
  <p id="example-element">And after all we are only ordinary</p>
</section>

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

Синтаксис

/* Single keyword */
text-underline-offset: auto;

/* length */
text-underline-offset: 0.1em;
text-underline-offset: 3px;

/* percentage */
text-underline-offset: 20%;

/* Global values */
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: revert-layer;
text-underline-offset: unset;

Значения

Это свойство задаётся одним из следующих значений:

auto

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

<length>

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

<percentage>

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

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

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

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

Примеры

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

<p class="one-line">Here's some text with an offset wavy red underline!</p>
<br />
<p class="two-lines">
  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;
}

.two-lines {
  text-decoration-color: purple;
  text-decoration-line: underline overline;
}

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

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

См. также

• text-decoration
• text-decoration-thickness