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

❮ Назад Вперед ❯

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

Свойство text-underline-position только частично поддерживается браузерами Chrome .

Для максимальной совместимости браузера могут быть использованы такие расширения, как -webkit- для Safari, Google Chrome и Opera (новые версии).

Значение по умолчанию	auto
Применяется	Ко всем элементам.
Наследуется	Да
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.textunderlinePosition = "under";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      text-decoration: underline;
      -webkit-text-underline-position: auto;
      -ms-text-underline-position: auto;
      text-underline-position: auto; 
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-underline-position</h2>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>

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

Рассмотрим другой пример со значением "under":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p { 
      text-decoration: underline; 
      -webkit-text-underline-position: under;
      -ms-text-underline-position: under;
      text-underline-position: under; 
      text-decoration-color: #1c87c9;
      font-size: 25px; 
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-underline-position</h2>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>

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

Значения

Значение	Описание
auto	Браузер использует свой собственный алгоритм размещения линии.
under	Линия расположена под текстовым контентом элемента.
left	Элемент расположен слева от текста в вертикальном режиме письма.
right	Элемент расположен справа от текста в вертикальном режиме письма.
above	Линия расположена над текстом.
below	Линия расположена под текстом.
auto-pos	Работает также, как значение auto.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.


33.0+	12.0+	x	x	x

33.0+

12.0+

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

Синтаксис

Пример

Пример

Значения

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

Практикуйте свои знания