O que é textos sublinhados e por que ninguém explica isso direito
Textos sublinhados são exatamente o que o nome diz: caracteres com uma linha horizontal desenhada logo abaixo deles. A maioria das pessoas usa isso sem pensar, seja num processador de texto, numa planilha ou em HTML. O problema é que poucos sabem como controlar isso de verdade quando as coisas dão errado. No HTML, a propriedade relevante é a text-decoration, especificamente o valor underline. Mas isso já é o básico que qualquer curso online te dá. O que raramente explicam é o que acontece quando você mistura underline com outros valores dessa mesma propriedade, ou quando tenta sublinhar algo que já tem pontuação embutida, como links em botões ou listas com marcadores.
Como criar e manipular textos sublinhados na prática
A forma mais direta é aplicar text-decoration: underline num elemento, seja via CSS inline, numa folha de estilo ou diretamente no elemento HTML usando a tag <u>. A diferença entre as abordagens importa mais do que parece. Quando uso a tag <u>, estou dizendo ao navegador e aos leitores de tela que aquele texto tem uma marcação especial, não apenas estética. Para acessibilidade, isso faz diferença. Um screen reader anuncia que há conteúdo sublinhado, o que pode ser útil em certos contextos. Quando uso CSS, é puramente visual e o significado semântico fica para o autor decidir.
Se você precisa de mais controle, como ajustar a cor, espessura ou estilo da linha, aí a coisa fica mais complexa porque a propriedade text-decoration não aceita esses parâmetros diretamente. Neste caso, eu caio em border-bottom aplicado ao elemento. O problema é que border-bottom não se comporta igual ao underline nativo. Ele não ignora pontuação da mesma forma, e em fontes com descendentes (letras como g, j, p, q, y), a borda pode colidir visualmente com os traços que descem. Eu tive esse problema específico num projeto recente. O cliente queria um link sublinhado com border-bottom personalizado, e a linha acabava passando por cima dos traços descendentes do "g" e do "j", criando um efeito visual estranho onde a linha parecia cortar as letras. A solução foi ajustar o padding-bottom do elemento em vez de confiar só no border, garantindo espaçamento suficiente entre a linha e os traços descendentes. Também testei usar outline-bottom como alternativa, mas ele não respeita o box model da mesma forma e quebra o layout em containers flex. Border-bottom com padding ajustado foi o que funcionou de forma consistente.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Outro detalhe que gente nova frequentemente perde: o underline nativo do navegador já vem com kerning automático. Ele calcula a distância entre os caracteres e mantém a linha contínua. Com border-bottom, você perde isso e pode acabar com linhas tracejadas visualmente em fontes muito espaçadas. Para corrigir, eu uso background-image com gradiente linear em vez de border, o que me dá controle total sobre position, size e repetição sem depender do rendering do navegador.
Por que textos sublinhados costumam dar trabalho
O underline nativo do navegador é simples de usar, mas tem limitações sérias que ninguém menciona. Primeiro, você não consegue mudar a cor da linha separadamente do texto em muitos navegadores mais antigos. Segundo, em telas retina ou de alta densidade, a linha às vezes aparece com espessura desigual — mais grossa entre os caracteres e mais fina em cima deles. Terceiro, e isso é o mais irritante: quando você aplica underline numa palavra com acentos, o marcador de posição pode se comportar de forma inconsistente entre navegadores. Eu vi o sublinhado aparecer fora do caractere em casos específicos com acentos circunflexos em fontes que não têm suporte adequado à tabela de ligaduras. Se o seu objetivo é puramente estético, eu recomendo evitar underline em favor de outras formas de destaque. Negrito, cor diferente, ou até um background sutil funcionam melhor em design moderno e evitam todas essas complicações técnicas. O underline é um padrão herdado da impressão e da escrita à mão, e o fato de ainda ser usado massivamente em links da web é mais por convenção do que por boa prática.
Para quem realmente precisa de textos sublinhados com controle profissional, o caminho é combinar border-bottom com padding, ajustar manualmente para descendentes, e testar em múltiplos navegadores. Não existe solução única que funcione em tudo perfeitamente, e gastar tempo com fallbacks para IE é praticamente inútil hoje em dia.
