Posição do sublinhado do texto - CSS-Tricks

Anonim

A text-underline-positionpropriedade define o posicionamento do sublinhado nos links ou no texto com text-decoration: underline;aplicado.

a ( text-underline-position: under; )

Valores

Estes são os valores especificados na Recomendação Candidata do Módulo de Decoração de Texto W3C CSS Nível 3:

  • auto: o padrão. O navegador decidirá entre colocar o sublinhado na linha de base do texto ou abaixo dela.
  • inherit: herda a posição sublinhada do pai.
  • under: coloca o sublinhado sob o texto com espaço extra para evitar cruzar descendentes.
  • left: para modos de escrita vertical. Isso coloca a linha à esquerda do texto.
  • right: para modos de escrita vertical. Isso coloca a linha à direita do texto.

A Microsoft usa um conjunto diferente de valores para o Internet Explorer:

  • auto: o padrão. Coloca o sublinhado abaixo do texto para todos os idiomas, exceto japonês (consulte o link do MSDN na seção “Mais informações” abaixo para obter detalhes).
  • above: posiciona o sublinhado acima do texto. Visualmente idêntico atext-decoration: overline;
  • below: posiciona o sublinhado abaixo do texto. Observe que isso é diferente de under- não limpará os descendentes.
  • auto-posfunciona da mesma forma que a implementação do MS auto.

Demo

No momento em que este artigo foi escrito, text-underline-positionera apenas parcialmente compatível com o Chrome (33+ com sinalizadores experimentais habilitados) e Internet Explorer 6+. Chrome suporta os auto, inherite underos valores da recomendação W3C candidato, enquanto o IE suporta seus próprios valores alternativos.

Esta demonstração mostra os valores undere belownos navegadores que os suportam.

Veja a Caneta text-underline-position por CSS-Tricks (@ css-tricks) em CodePen.

Relacionado

  • decoração de texto

Mais Informações

  • text-underline-position no Módulo de Decoração de Texto CSS Nível 3 CR.
  • text-underline-position no MSDN.

Suporte para navegador

cromada Safári Raposa de fogo Ópera IE Android iOS
33 * Nenhum Nenhum Nenhum 6 † Nenhum Nenhum

* com -webkitprefixo e sinalizadores experimentais ativados em chrome: // sinalizadores. lefte rightvalores não suportados.
† com -msprefixo e valores específicos do IE.