Propriedade CSS text-underline-position - Sintaxe, Valores, Exemplos

A propriedade CSS text-underline-position controla onde o sublinhado é desenhado em relação ao texto. Ela só tem efeito quando um sublinhado já existe — ou seja, quando o elemento tem text-decoration (ou text-decoration-line) definido como underline. Sozinha, text-underline-position nunca desenha um sublinhado; ela apenas reposiciona um existente.

Por padrão (auto), o navegador posiciona o sublinhado próximo à linha de base alfabética do texto. Isso fica bem para a maioria dos textos em latim, mas a linha pode colidir com os descendentes de letras como g, j, p, q e y. Definir text-underline-position: under empurra a linha abaixo de todos os descendentes para que nunca os cruze — útil para listagens de código, matemática ou fórmulas químicas onde uma separação limpa é importante.

Esta página cobre a sintaxe, todos os valores, quando usar cada um e exemplos executáveis.

Quando devo usá-la?

Sublinhados mais limpos — use under para que a linha não cruze os descendentes (p, y, g) em vez de cortá-los.
Anotação de fórmulas — em expressões matemáticas ou químicas onde sobrepor a linha de base seria ambíguo.
Texto vertical — left e right escolhem de qual lado dos glifos a linha fica quando writing-mode é vertical.

A propriedade text-underline-position é suportada em todos os navegadores modernos.

Valor Inicial	auto
Aplica-se a	Todos os elementos.
Herdada	Sim.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.textUnderlinePosition = "under";

Nota: Em JavaScript, propriedades CSS com hífens são convertidas para camelCase (por exemplo, text-underline-position torna-se textUnderlinePosition).

Sintaxe

Valores CSS de text-underline-position

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

A palavra-chave auto não pode ser combinada com nenhum outro valor. As palavras-chave under, left e right podem ser combinadas (por exemplo, under left), mas left e right são mutuamente exclusivas — você pode escolher apenas uma delas, opcionalmente junto com under.

Exemplo da propriedade text-underline-position:

Exemplo de código CSS text-underline-position

<!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>

Experimente Você Mesmo »

Resultado

Exemplo da propriedade text-underline-position com o valor "under":

Exemplo de valor under do CSS text-underline-position

<!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>

Experimente Você Mesmo »

Exemplo com writing-mode vertical e o valor "left":

Em texto vertical, left e right determinam de qual lado dos caracteres o sublinhado é traçado.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        writing-mode: vertical-rl;
        text-decoration: underline;
        text-underline-position: left;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Vertical text with text-underline-position: left</h2>
    <p>Lorem Ipsum is simply dummy text.</p>
  </body>
</html>

Valores

Valor	Descrição
auto	Padrão. O navegador usa seu próprio algoritmo para posicionar a linha na linha de base alfabética ou logo abaixo dela.
under	Força o sublinhado abaixo do conteúdo de texto para que não cruze os descendentes de letras como `g`, `p` e `y`.
left	Em um writing-mode vertical, posiciona o sublinhado no lado esquerdo do texto. Ignorado em texto horizontal.
right	Em um writing-mode vertical, posiciona o sublinhado no lado direito do texto. Ignorado em texto horizontal.
initial	Faz a propriedade usar seu valor padrão (`auto`).
inherit	Herda a propriedade do seu elemento pai.

Propriedades relacionadas

text-decoration — a abreviação que efetivamente desenha a linha (text-underline-position apenas a reposiciona).
text-decoration-line — escolha underline, overline ou line-through.
text-decoration-color — define a cor do sublinhado.
text-decoration-style — linhas sólidas, tracejadas, pontilhadas, duplas ou onduladas.

Prática

Qual afirmação sobre text-underline-position está correta?

O valor 'under' posiciona o sublinhado abaixo dos descendentes como g, p e y.text-underline-position desenha um sublinhado mesmo sem text-decoration.O valor 'auto' pode ser combinado com 'under' (por exemplo, 'auto under').