Atributo text-underline-offset do CSS

Definição e uso

text-underline-offset O atributo especifica a distância de deslocamento do texto sublinhado.

Exemplo

Defina a distância de deslocamento do texto sublinhado:

div.a {
  text-decoration: underline;
}
div.b {
  text-decoration: underline;
  text-underline-offset: 10px;
}
div.c {
  text-decoration: underline wavy blue;
}
div.d {
  text-decoration: underline wavy blue;
  text-underline-offset: 10px;
}

Experimente você mesmo

Sintaxe do CSS

text-underline-offset: auto|comprimento|porcentagem|initial|inherit;

Valor do atributo

Valor Descrição
auto Valor padrão. O navegador define o deslocamento apropriado para o sublinhado.
comprimento Especifique o deslocamento como um valor de comprimento.
porcentagem Especifique o deslocamento como uma porcentagem.
initial Defina essa propriedade para seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: auto
Herança: sim
Produção de animação: Não suportado. Veja:Propriedades relacionadas a animação.
Versão: CSS4
Sintaxe do JavaScript: object.style.textUnderlineOffset="1em"

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta plenamente essa propriedade.

Chrome Edge Firefox Safari Opera
87.0 87.0 70.0 12.1 73.0

Páginas relacionadas

Tutorial:Decoração de texto do CSS

Referência:Atributo textDecoration do HTML DOM