text-underline-position

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

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

Свойство text-underline-position CSS определяет положение подчеркивания, которое задаётся значением свойства text-decoration underline.

Попробуйте

Синтаксис

/* Single keyword */
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;

/* Multiple keywords */
text-underline-position: under left;
text-underline-position: right under;

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

Значения

auto: Браузер использует свой алгоритм для размещения линии на или под базовой линией букв.
from-font: Если файл шрифта содержит информацию о предпочтительном положении, используется это значение. Если эта информация отсутствует, используется значение, как если бы было задано auto, и браузер выбирает подходящее положение.
under: Принудительно размещает линию ниже базовой линии букв, в позиции, где она не будет пересекать какие-либо нисходящие элементы. Это полезно для обеспечения читаемости химических и математических формул, которые широко используют подстрочные индексы.
left: В вертикальных режимах отображения этот ключевое слово принудительно размещает линию слева от текста. В горизонтальных режимах отображения он является синонимом auto.
right: В вертикальных режимах отображения это ключевое слово принудительно размещает линию справа от текста. В горизонтальных режимах отображения он является синонимом auto.

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

Начальное значение	`auto`
Применимо к	всем элементам
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

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

text-underline-position = 
  auto                           |
  [ under || [ left | right ] ]

Примеры

Простой пример

Рассмотрим несколько простых примеров абзацев:

<p class="horizontal">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.
</p>

<p class="vertical">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.
</p>

Наш CSS выглядит следующим образом:

p {
  font-size: 1.5rem;
  text-transform: capitalize;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.horizontal {
  text-underline-position: under;
}

.vertical {
  writing-mode: vertical-rl;
  text-underline-position: left;
}

В этом примере мы задаём для обоих абзацев толстую линию подчеркивания. В горизонтальном тексте мы используем text-underline-position: under; для размещения линии подчеркивания под всеми нисходящими элементами.

В тексте с вертикальным writing-mode режимом мы можем использовать значения left или right для размещения линии подчеркивания слева или справа от текста, как требуется.

Живой пример выглядит так:

Глобальная настройка text-underline-position

Поскольку свойство text-underline-position наследуется и не сбрасывается сокращённым свойством text-decoration, может быть целесообразно задать его значение на глобальном уровне. Например, значение under может быть подходящим для документа с множеством химических и математических формул, которые широко используют подстрочные индексы.

:root {
  text-underline-position: under;
}

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

Спецификация
CSS Text Decoration Module Level 3 # text-underline-position-property

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`text-underline-position`	33	12	74	20	12.19	33	79	20	12.29	2.0	4.4.3
`from-font`	87	87	74	73	12.1	87	79	62	12.2	14.0	87
`left`	71	79	74	58	18.2	71	79	50	18.2	10.0	71
`right`	71	79	74	58	18.2	71	79	50	18.2	10.0	71
`under`	33	79	74	20	12.1	33	79	20	12.2	2.0	4.4.3

См. также

Свойство text-decoration является сокращением для установки большинства свойств декора текста, включая text-decoration-line, text-decoration-color и text-decoration-style. Однако оно не устанавливает text-underline-position.

© 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-position