Свойство CSS text-underline-position

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

Свойство text-underline-position широко поддерживается во всех современных браузерах.

Начальное значение	auto
Применяется ко	Всем элементам.
Наследуется	Да.
Анимируемое	Нет.
Версия	CSS3
Синтаксис DOM	object.style.textUnderlinePosition = "under";

Примечание: В JavaScript свойства CSS с дефисами преобразуются в camelCase (например, text-underline-position становится textUnderlinePosition).

Синтаксис

Значения CSS text-underline-position

css

text-underline-position: auto | [ under || left || right || above || below ] | initial | inherit;

Пример свойства text-underline-position:

Пример кода CSS text-underline-position

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-decoration: underline;
        text-underline-position: under;
      }
    </style>
  </head>
  <body>
    <h2>Text underline-position property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>

Try it Yourself »

Результат

CSS text-underline-position under value

Пример свойства text-underline-position со значением "under":

Пример значения "under" для CSS text-underline-position

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-decoration: underline;
        text-underline-position: under;
        text-decoration-color: #1c87c9;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Text underline-position property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание
auto	Браузер использует собственный алгоритм для размещения линии на или под базовой линией алфавита.
under	Принудительно размещает подчёркивание под текстовым содержимым элемента.
left	Принудительно размещает подчёркивание слева от текста при вертикальном режиме записи.
right	Принудительно размещает подчёркивание справа от текста при вертикальном режиме записи.
above	Принудительно размещает линию над текстом.
below	Принудительно размещает линию под текстом.
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Какое утверждение неверно относительно свойства text-underline-position?

Оно поддерживается всеми браузерами.Значение "below" размещает линию под текстом.Значение "auto-pos" работает так же, как значение auto.

Свойство CSS text-underline-position ​

Синтаксис ​

Пример свойства text-underline-position: ​

Результат ​

Пример свойства text-underline-position со значением "under": ​

Значения ​