Propriedade text-underline-offset
Última atualização: 2026-09-13
text-underline-offset Propriedade text-underline-offset
A propriedade text-underline-offset do CSS define a distância entre um sublinhado e a linha de base do texto, tornando a posição do sublinhado mais flexível e polida. Por padrão, o sublinhado gruda na parte inferior do texto; um deslocamento deixa uma lacuna para que a linha não colida com descendentes como g e y.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Sim |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
text-underline-offset: auto | <length> | <percentage>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | Palavra-chave | Deslocamento padrão |
<length> | <percentage> | Tipo | A distância de deslocamento do sublinhado como comprimento ou porcentagem |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-underline-offset | ✓ v66 | ✓ v79 | ✓ v62 | ✓ v12.1 | ✓ v53 |
| Suportado em todos os principais navegadores | |||||
Dica： O text-underline-offset afeta apenas a posição do sublinhado; overlines e line-through não são tocados.
Aviso： Requer versões de navegadores relativamente recentes (Chrome 66+, Firefox 62+, Safari 12.1+); navegadores mais antigos ignoram a propriedade.
❓ Perguntas Frequentes
QQual é a diferença entre text-underline-offset e text-decoration-thickness?
AO text-underline-offset controla a distância entre o sublinhado e o texto, enquanto o text-decoration-thickness controla a espessura do sublinhado. Eles se complementam e podem ser combinados para um estilo de sublinhado mais refinado.
QAo que se refere a porcentagem da propriedade text-underline-offset?
AÉ relativa ao font-size do elemento, onde 100% equivale ao tamanho da fonte atual. Por exemplo, com fonte de 16px, text-underline-offset: 30% desloca a linha cerca de 4,8px para baixo. Um valor 0 mantém o sublinhado grudado na base do texto.
QComo crio uma lacuna entre o sublinhado e o texto no CSS?
AAlém de text-decoration: underline, adicione text-underline-offset: 3px (ou 0.2em) e o sublinhado se desloca para baixo como um todo. Combine com text-decoration-thickness para ajustar também a espessura e obter sublinhados de link mais polidos.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
