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 Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera
33.0+ 12.0+ x x x

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

Какие значения можно применить к свойству CSS 'text-underline-position'?
Считаете ли это полезным?