A text-decoration-thicknesspropriedade em CSS define a espessura do traço da linha de decoração que é usada no texto em um elemento. As text-decoration-linenecessidades de valor para ser underline, line-throughou overlinepara refletir a propriedade de espessura.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Sintaxe
auto | from-font | | Valores
auto: (Padrão) permite que o navegador especifique uma espessura apropriada para a linha de decoração do texto.from-font: Se a primeira fonte disponível tiver métricas especificando uma espessura preferida, ela usa essa espessura; caso contrário, ele se comporta como o valor automático.: Qualquer comprimento válido com uma unidade especifica a espessura das linhas de decoração do texto como um comprimento fixo. Isso substitui qualquer informação na fonte e no padrão do navegador.percentage: Especifica a espessura das linhas de decoração do texto como uma porcentagem de 1em na fonte do elemento.initial: A configuração padrão da propriedade, que é automática.inherit: Adota o valor da espessura da decoração do pai.unset: Remove a espessura atual do elemento.
Demo
Altere o valor de text-decoration-thicknessna demonstração a seguir para ver como a propriedade afeta a decoração do texto do elemento:
É constante para descendentes
Depois de definir uma decoração para um elemento, todos os seus filhos também terão essa decoração. Agora imagine que queremos mudar a espessura da decoração de uma das crianças:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Isso não funciona porque a espessura da decoração especificada pelos elementos ancestrais não pode ser substituída. Para que isso funcione, uma especificidade de decoração precisa ser definida para o próprio elemento:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; ) p span ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.1em; /* It works! */ )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.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )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. Isso significa que não é dimensionado com a mudança na fonte. No lado direito, entretanto, o texto herda um valor relativo (neste caso 20%); portanto, a espessura é dimensionada com a mudança na fonte.
Embora o rascunho atual da especificação faça referência a valores percentuais para text-decoration-thickness, o suporte real está atualmente limitado ao Firefox.
Usando com text-decoration
O rascunho atual da especificação CSS Text Decoration Module Nível 4 inclui text-decoration-thicknessum valor na text-decorationpropriedade abreviada.
.link ( text-decoration: underline solid green 1px; )
/* The longhand equivalent */ .link ( text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: green, text-decoration-thickness: 1px; )Embora text-decorationseja bem suportado, o suporte para a inclusão do text-decoration-thicknessé atualmente limitado ao Firefox.
Suporte de navegador
| Recurso | IE | Beira | Raposa de fogo | cromada | Safári | Ópera |
|---|---|---|---|---|---|---|
| Propriedade | Não | Não | 70 | Não | 12,1 | Não |
| Percentagens | Não | Não | 76 | Não | Não | Não |
| Forma abreviada | Não | Não | 70 | Não | Não | Não |
| Recurso | Android Chrome | Android Firefox | Navegador Android | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| Propriedade | Não | Não | Não | 12,2 | Não |
| Percentagens | Não | Não | Não | Não | Não |
| Forma abreviada | Não | Não | Não | Não | Não |
Notas
- A propriedade costumava ser chamada
text-decoration-width, mas foi atualizada no rascunho de trabalho de 2019 da especificação CSS Text Decoration Module nível 4. - O navegador deve usar uma espessura mínima de 1 pixel do dispositivo.