Deslocamento de sublinhado de texto - CSS-Tricks

A text-underline-offsetpropriedade em CSS define a distância dos sublinhados do texto a partir de sua posição inicial.

.text ( text-underline-offset: 0.5em; )

Depois de aplicar um sublinhado para um elemento usando text-decorationcom o valor de sublinhado , você pode dizer a que distância essa linha deve estar do seu texto usando a text-underline-offsetpropriedade.

Valores

• auto: (Padrão) O navegador irá especificar um deslocamento apropriado para sublinhados.
• : Qualquer comprimento válido com uma unidade especificada (incluindo valores negativos). Isso substitui qualquer informação na fonte e no padrão do navegador.
• percentage: Especifica o deslocamento dos sublinhados como uma porcentagem de 1em na fonte do elemento.
• initial: A configuração padrão da propriedade, que é automática.
• inherit: Adota o valor de deslocamento de sublinhado do pai.
• unset: Remove o deslocamento atual do elemento.

Demo

Na demonstração a seguir, você pode alterar o valor de text-underline-offsetpara ver como isso afeta a decoração do texto do elemento:

Notas

• text-underline-offset não faz parte da abreviação de text-decoration.
• Não funciona em outras text-decorationlinhas, como line-throughou overline.
• Valores negativos são aceitos, o que desloca o sublinhado para dentro.

É constante para os descendentes

Depois de definir uma decoração para um elemento, todos os seus filhos também terão essa decoração. Agora imagine que você deseja alterar o deslocamento do sublinhado para um dos filhos:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-underline-offset: 1.5em; /* Doesn't work */ )

Isso não funciona porque você não pode substituir um deslocamento de um sublinhado especificado por elementos ancestrais. Para que isso funcione, você precisa definir uma especificidade de sublinhado para o próprio elemento:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-decoration: underline; text-underline-offset: 1.5em; /* It works! */ )

Usar em é recomendado

A vantagem de usar um valor relativo como em é que o deslocamento será dimensionado com a mudança do font-sizevalor. Por outro lado, se você usar uma unidade de comprimento fixo (por exemplo, pixels), o deslocamento não se ajustará às mudanças e pode não ser a distância que você gostaria de ter para o seu texto:

Porcentagem e a cascata

Para esta propriedade, um comprimento herdará um valor fixo e não será dimensionado com a fonte. Por outro lado, uma porcentagem herdará como um valor relativo e, portanto, será dimensionada com as alterações na fonte à medida que for herdada.

A demonstração a seguir mostra a comparação entre o uso de em e os valores de porcentagem no caso de herança e, como você pode ver, no lado esquerdo (no qual estamos usando em) o valor herdado tem um comprimento fixo. Você pode verificar o valor calculado em suas DevTools. Isso significa que não é dimensionado com a mudança na fonte. No lado direito, porém, os textos herdam um valor relativo (neste caso 100%); portanto, as escalas de deslocamento com a mudança na fonte:

Modos de escrita e posição do sublinhado do texto

Ter um modo de escrita vertical afeta a posição do sublinhado. Isso mudará a direção do deslocamento aplicado no elemento. Brinque com os valores na seguinte demonstração:

Relacionado

• text-decoration
• text-underline-position
• text-decoration-thickness

Mais Informações

Módulo de Decoração de Texto CSS Nível 4 (Rascunho do Editor)

Suporte de navegador

No momento em que este livro foi escrito, o Firefox é o único navegador com suporte completo. Safari não suporta valores percentuais.

texto-sublinhado-deslocamento

IE	Beira	Raposa de fogo	cromada	Safári	Ópera
Não	Não	Mais de 70	Não	12,1+	Todo

Android Chrome	Android Firefox	Navegador Android	iOS Safari	Opera Mini
Não	Não	Não	12,2+	sim

deslocamento do sublinhado do texto: porcentagem

IE	Beira	Raposa de fogo	cromada	Safári	Ópera
Não	Não	74+	Não	Não	Não

Android Chrome	Android Firefox	Navegador Android	iOS Safari	Opera Mini
Não	Não	Não	Não	sim