Como Fazer O Underline

Sublinhando texto em CSS e na prática

O jeito mais direto de colocar um sublinhado é usando a propriedade text-decoration. Você define o valor underline e pronto. O problema é que essa simplicidade esconde detalhes que só aparecem quando algo dá errado no projeto real.

Como fazer o underline corretamente no CSS

Eu trabalhei num painel interno onde o design system pedia linhas subtis embaixo de links de navegação. A solução óbvia era simplesmente aplicar text-decoration: underline, mas o resultado visual era horrível. A linha nativa do navegador fica extremamente próxima do texto, quase colada nas descidas das letras p, q, g, y. Isso gera uma bagunça visual porque a decoração intersecta os traços descendentes. O workaround que eu usei foi abandonar text-decoration e criar uma linha personalizada com border-bottom ou box-shadow. Com border-bottom você controla espessura, cor, estilo e o espaçamento entre a linha e o texto usando padding-bottom. Com box-shadow a vantagem é que a sombra não ocupa espaço no layout, então o texto ao redor não se move. Aqui vai um exemplo funcional:

text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;

O text-underline-offset é a propriedade que resolve o problema que eu descrevi acima. Ela ajusta a distância entre a linha e a base do texto. Antes dela existir, todo mundo fazia gambiarras com margin ou padding. Agora ela tem suporte universal em navegadores modernos, então não tem motivo pra não usar. Vou ser objetivo sobre as limitações. text-underline-offset não funciona no Safari em versões anteriores a 12.1, que ainda roda em alguns Macs empresariais. Se o seu público inclui esses usuários, você precisa de um fallback. A abordagem mais segura é combinar as propriedades com uma declaração de border-bottom como fallback em um @supports negativo, ou simplesmente usar border-bottom em todos os casos se o design permitir. Outro detalhe que ninguém menciona: o text-decoration-color permite definir cor diferente da do texto. Isso é útil quando você quer sublinhar um link sem manter a cor padrão de link azul. Mas cuidado com contraste. Uma linha muito clara em fundo claro some completamente, e ninguém percebe que o elemento é clicável. Se você está trabalhando com React ou algum framework que injeta classes dinamicamente, saiba que estilos inline não suportam text-underline-offset diretamente. Nesse cenário, a solução é criar uma classe CSS dedicada e aplicá-la via className. Estilos inline funcionam apenas com as propriedades básicas de text-decoration. Para quem precisa sublinhar em contextos diferentes, como em elementos de tabela ou em textos multilinha, o comportamento pode variar. Em tabelas com border-collapse, a borda inferior da célula pode conflitar visualmente com um sublinhado aplicado em um link dentro dela. Nesses casos, verifique sempre o rendering final em ferramentas como o DevTools do Chrome, porque o que funciona em um contexto pode quebrar em outro. Aqui está um snippet completo que cobre a maioria dos casos:

a { color: #1a1a1a; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: #1a1a1a; }

Isso resolve o problema na maioria dos projetos. Se o seu caso for mais específico, como sublinhado em tipografia com pesos muito finos ou em layouts responsivos complexos, o ajuste fino vai depender do teste visual direto no navegador.