Fala, dev! Tudo tranquilo? Seja muito bem-vindo a mais um tutorial de CSS aqui da nossa apostila. Hoje nós vamos desmistificar uma propriedade clássica do web design, mas que ganhou superpoderes fantásticos nas especificações modernas do CSS: a text-decoration.
text-decoration CSS:
Como Sublinhar e Riscar Textos
Se você já se pegou quebrando a cabeça para entender como tirar aquela linha azul clássica dos links, ou se precisa criar um efeito de preço riscado para um e-commerce sem poluir o seu código com tags obsoletas, este guia foi feito sob medida para você. Vamos aprender a dominar o sublinhado (underline), o sobrelinhado (overline), a linha cortada (line-through) e até entender por que o infame texto piscante (blink) se tornou uma lenda do passado.
Pegue seu café, abra o seu editor de código favorito e vamos direto ao que interessa, porque o mercado de desenvolvimento front-end não espera por quem fica preso em conceitos datados!
O que é e para que serve o text-decoration no CSS?
A propriedade text-decoration no CSS é usada para adicionar ou remover decorações visuais aos textos do seu site, como linhas inferiores (underline), superiores (overline) ou cortadas (line-through). Ela controla de forma semântica como esses elementos gráficos interagem com o texto no DOM.
🛠️ Evolução Histórica: O Antes vs. O Depois
Antigamente: Para criar um texto sublinhado ou riscado, os desenvolvedores recorriam às tags HTML <u> ou <strike>. Isso misturava a estrutura da página com a estilização visual, quebrando regras básicas de semântica.
Hoje em dia: O HTML cuida apenas do significado do conteúdo, enquanto a propriedade text-decoration do CSS assume 100% da responsabilidade visual, permitindo alterar cores, estilos e espessuras de linha sem mexer em uma única linha de estrutura textual. Isso melhora drasticamente o tempo de renderização e a manutenção do seu projeto.
Texto Sublinhado em CSS - text-decoration: underline
Continuando nossa jornada de formatação de textos em CSS, vamos dominar o uso de sublinhados. Essa é aquela famosa linha horizontal posicionada perfeitamente abaixo da linha de base das letras da sua fonte.
O uso mais comum e obrigatório por convenção de usabilidade na web ocorre nos links de navegação. Por padrão, os navegadores aplicam uma cor azul para links não visitados e tons arroxeados ou avermelhados para links já clicados, sempre acompanhados do clássico sublinhado para guiar a experiência do usuário (UX).
Para aplicar esse efeito de maneira profissional em qualquer elemento de texto (como parágrafos, spans ou títulos), nós definimos o valor como underline.
A sintaxe básica no CSS é extremamente simples:
/* Aplica o sublinhado diretamente na folha de estilo externa */
p.destaque-sublinhado {
text-decoration: underline; /* Adiciona a linha abaixo do texto */
}Caso precise aplicar isso de forma rápida via estilo em linha (inline style) — embora a boa prática recomende usar classes separadas —, o código HTML ficaria assim:
<!-- Exemplo de aplicação inline para fins didáticos -->
<p style="text-decoration: underline;">Tutorial completo de CSS - Curso Programação Progressiva</p>Resultado Prático na Viewport:
Tutorial completo de CSS - Curso Programação Progressiva
Quer dominar o Front-End de verdade sem depender de IAs?
Chega de ficar travado copiando código sem entender como o navegador renderiza seu layout. Com a nossa Apostila Digital de HTML & CSS Progressivo, você vai aprender a estruturar e estilizar sites profissionais com foco real em performance, mercado de trabalho e SEO de alta conversão. Estude offline, sem anúncios irritantes e com projetos práticos do zero!
"Estava totalmente travado tentando entender a lógica dos alinhamentos e do fluxo do CSS, e o material didático dessa apostila simplesmente salvou os meus projetos!" — Carlos, Desenvolvedor Front-End Júnior.
Fonte Sobrelinhada em CSS - text-decoration: overline
Se o prefixo "sub" indica algo que fica posicionado abaixo, a contraparte exata para colocar uma linha na parte superior do texto é o valor overline (sobrelinhado). Embora não seja um efeito visual padrão muito comum no cotidiano da web, ele oferece soluções estéticas muito refinadas quando aplicado corretamente em cabeçalhos, assinaturas de marcas ou elementos decorativos minimalistas.
A regra de sintaxe permanece idêntica à anterior, mudando exclusivamente a palavra-chave que orienta a renderização gráfica da linha:
/* Adiciona uma linha elegante acima do texto */
.texto-topo {
text-decoration: overline;
}Veja como estruturar o elemento no arquivo HTML do seu post ou componente:
<p style="text-decoration: overline;">Como usar uma linha acima do texto/fonte em CSS</p>Resultado Prático na Viewport:
Como usar uma linha acima do texto/fonte em CSS
Texto Riscado ou Cortado em CSS - text-decoration: line-through
Chegamos a uma das mecânicas de conversão visual mais poderosas da internet: o texto riscado através do valor line-through. Se você trabalha desenvolvendo plataformas de e-commerce ou landing pages de vendas, essa propriedade será sua melhor amiga para criar gatilhos visuais de preço promocional.
Essa linha atravessa horizontalmente o centro exato dos caracteres, sinalizando ao leitor que aquela informação foi modificada, atualizada ou substituída por algo melhor.
Confira a sintaxe limpa no CSS externo:
/* Perfeito para riscar preços ou tarefas concluídas */
.preco-antigo {
text-decoration: line-through;
}Para montar um parágrafo que combine textos normais com o trecho riscado sem quebrar a semântica visual, englobe o trecho em uma tag genérica <span>:
<p>Criar sites <span style="text-decoration: line-through;">é difícil</span> exige muito estudo e dedicação.</p>Exemplo Prático voltado para Conversão e Vendas:
Este curso de Webmaster custa apenas R$ 1.000,00 R$ 500,00!
Aproveite! Agora o desconto é de 20% 50% OFF!
⚠️ Dica de Ouro de Acessibilidade (Webmaster Pro)
Leitores de tela usados por pessoas com deficiência visual nem sempre anunciam que um texto está riscado quando usamos apenas estilo CSS. Se a informação antiga for crucial (como um preço anterior), combine o uso do CSS com a tag HTML semântica <del> (para conteúdo deletado) ou adicione um atributo aria-label explicando que aquele valor se trata do preço antigo.
O Texto Piscante em CSS - text-decoration: blink e por que ele morreu
Se você viveu a era nostálgica da internet do início dos anos 2000, certamente lembra de sites repletos de GIFs brilhantes e textos piscando freneticamente na tela disputando sua atenção. No CSS clássico, a especificação incluía o valor blink para automatizar essa transição de opacidade da fonte indo de 0% a 100% em loops infinitos.
A sintaxe histórica era desenhada desta forma:
/* Um fantasma do passado do Web Design */
.texto-pisca {
text-decoration: blink;
}A Realidade Atual do Mercado: Hoje, esse valor foi completamente descontinuado pelas diretrizes da W3C e removido de quase todos os navegadores modernos (como Google Chrome, Microsoft Edge e Safari). O motivo principal? Acessibilidade e Saúde Coletiva. Textos piscando sem controle do usuário podem desencadear crises de epilepsia fotossensível, geram uma péssima experiência de leitura e destroem a retenção de público do seu site. Deixe esse efeito guardado no passado!
Removendo Decorações e Linhas de Links - text-decoration: none
Provavelmente, o valor que você mais usará em toda a sua jornada como programador front-end sênior é o none. Ele serve como um "reset", instruindo o navegador a remover qualquer tipo de decoração gráfica textual pré-existente herdada ou nativa da tag.
É a ferramenta padrão indispensável para remover aquela linha azul padrão que vem nos links do HTML (tag <a>), permitindo que você construa menus de navegação modernos, botões estilosos ou cartões de posts totalmente limpos.
/* Remove completamente as linhas de todos os links do seu site */
a {
text-decoration: none; /* Deixa o link limpo e sem sublinhados */
}Vamos analisar o impacto visual comparando um link limpo com a propriedade redefinida e um link padrão nativo do ecossistema do navegador:
<!-- Link customizado sem a linha inferior -->
<a href="#" style="text-decoration: none; color: #2563eb;">Link Limpo com text-decoration: none</a>
<!-- Link padrão nativo do navegador -->
<a href="#" style="color: #2563eb;">Link Tradicional com Linha Nativa</a>Resultado Prático na Tela:
💡 Dica de Usabilidade (UX Design)
Se você remover a linha do link usando o valor none, certifique-se de fornecer um forte indicador visual alternativo quando o usuário passar o mouse por cima do elemento. Uma boa prática de mercado é reativar a linha apenas no estado de foco do ponteiro usando a pseudo-classe hover: a:hover { text-decoration: underline; }.
A Tática Avançada: A Propriedade Shorthand (Sintaxe Moderna)
No CSS3 e especificações seguintes, a propriedade text-decoration transformou-se em uma propriedade simplificada (shorthand). Isso significa que, em apenas uma única linha de código, você pode ditar o tipo da linha, o estilo geométrico, a cor exata e a espessura no pixel perfeito!
A ordem ideal da propriedade estendida é a seguinte:
text-decoration: [line] [style] [color] [thickness];
/* Aplicação avançada e estilosa de sublinhado em uma única regra */
h3.titulo-premium {
/* Linha inferior, ondulada (wavy), na cor azul escuro e com 3px de espessura */
text-decoration: underline wavy #1e3a8a 3px;
}Para aprender os detalhes profundos das especificações nativas de cada um destes novos sub-atributos de renderização, consulte sempre a documentação oficial internacional da MDN Web Docs, garantindo que suas práticas estejam sempre alinhadas com os padrões mais modernos da indústria.
Perguntas Frequentes sobre text-decoration no CSS (FAQ)
Como tirar o risco azul ou linha que fica embaixo do link no CSS?
none na propriedade. O código correto é: a { text-decoration: none; }.
É possível alterar a cor da linha do sublinhado sem alterar a cor do texto?
text-decoration-color para atribuir uma cor à linha diferente da cor que está aplicada na fonte do texto, ou usar a sintaxe shorthand simplificada, como por exemplo: text-decoration: underline red;.
Por que o valor text-decoration: blink não funciona no meu navegador Chrome ou Edge?
blink) foi descontinuado do desenvolvimento web moderno por violar severamente as diretrizes internacionais de acessibilidade (WCAG). Os navegadores modernos removeram o suporte ao motor de renderização dessa propriedade para evitar problemas de saúde e poluição visual nas páginas.
O que estudar a seguir:
Não pare seus estudos por aqui! Continue sua trilha de aprendizado para se tornar um desenvolvedor de elite dominando as seguintes aulas:
- Tutorial 1: Como usar a propriedade text-transform para gerenciar maiúsculas e minúsculas
- Tutorial 2: Alinhamento Avançado: Entendendo a propriedade text-align no CSS
- Tutorial 3: Guia Completo do Box Model: Margens, Bordas e Padding Explicados Simples
Nenhum comentário:
Postar um comentário