text-underline-offset

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

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

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

Попробуйте

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

Синтаксис

/* 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;

Свойство text-underline-offset задаётся одним значением из списка ниже.

Значения

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

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

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

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

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

<length-percentage> = 
  <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;
}

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

Спецификация
CSS Text Decoration Module Level 4 # underline-offset

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`text-underline-offset`	87	87	70	73	12.1	87	79	62	12.2	14.0	87
`auto`	87	87	70	73	12.1	87	79	62	12.2	14.0	87
`percentage`	87	87	74	73	18.2	87	79	62	18.2	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-underline-offset