12.01.2025

Como Mudar a Cor da Linha de Sombreamento no CSS

Resposta Rápida

Para aplicar uma cor específica ao efeito de riscado no CSS, utilize a propriedade text-decoration-color:

<!-- Todos nós adoramos um toque especial, não é mesmo? -->
<span style="text-decoration: line-through; text-decoration-color: red; color: blue;">Texto azul com riscado vermelho. Inesperado e atraente!</span>

Este código irá criar um riscado vermelho sobre o texto azul, adicionando um toque único ao seu site.

Aplicação Detalhada e Exemplos

Vamos explorar técnicas detalhadas e aspectos principais de trabalhar com riscados coloridos.

Criando Riscados Originais

Usar o pseudo-elemento CSS ::after em conjunto com a propriedade border-top permite ajustar finamente o efeito de riscado. Este método é perfeito se você precisar de uma linha riscada inclinada ou controle preciso sobre sua posição em relação ao texto:

/* Linhas retas são muito básicas */
.strikethrough-custom::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px solid red;
  transform: rotate(-10deg);
}

Compatibilidade com Navegadores

A propriedade text-decoration-color é bem suportada na maioria dos navegadores modernos. No entanto, tenha em mente que você pode encontrar problemas com o Edge ou IE (Internet Explorer). Sempre verifique a compatibilidade com várias versões de navegadores e forneça opções alternativas para usuários quando necessário.

Aspectos de Design

Escolha cores contrastantes para o riscado e o texto para garantir uma leitura confortável. Teste seu design em diferentes dispositivos para manter os padrões visuais.

Dicas Adicionais

Use o método ::after com moderação, especialmente ao trabalhar com blocos grandes de texto, para evitar problemas de desempenho. E esteja ciente de possíveis conflitos de estilo devido ao uso de !important no CSS.

Visualização

Está pronto para implementar riscados coloridos em seu design?

Vamos visualizar isso:

Imagine um texto com text-decoration pintado em uma linda cor verde 🟢:

Texto: "Promoção" 

Agora, vamos adicionar um riscado vermelho 🔴:

Riscado: "——" 

Aqui está a combinação de cores estilosa:

Resultado: "P̶r̶o̶m̶o̶ç̶ã̶o̶" com texto verde e riscado vermelho.

Esse processo se assemelha a trabalhar com duas camadas de tinta!

Efeitos Especiais e Casos de Uso

Aplicando Efeitos de Hover

Crie um efeito interativo de riscado usando a pseudo-classe :hover. Observe que este efeito funcionará no IE7 apenas se o link tiver um atributo href.

Implementando Riscados Inclinados

Torne seu design mais dinâmico criando riscados inclinados usando transformações CSS no pseudo-elemento ::after.

Riscados Animados

Crie animações de riscado envolventes usando keyframes (@keyframes) e animações CSS.

Oportunidades Futuras com CSS3

Fique atento às novas funcionalidades no CSS3, como a propriedade text-decoration-thickness, que permite ajustar a espessura do riscado.

Recursos Úteis

1. text-decoration | CSS-Tricks — Um artigo detalhado sobre propriedades de text-decoration no CSS.
2. text-decoration-color - CSS: Cascading Style Sheets | MDN — Documentação oficial sobre a propriedade text-decoration-color.
3. Propriedade text-decoration do CSS — Instruções e exemplos para usar a propriedade text-decoration.
4. ::after - CSS: Cascading Style Sheets | MDN — Tudo o que você precisa saber sobre o pseudo-elemento ::after.
5. Um Monte de Coisas Incríveis que Pseudo Elementos Podem Fazer | CSS-Tricks — Usos criativos dos pseudo-elementos ::before e ::after.
6. Módulo de Decoração de Texto CSS Nível 4 — Padrões evolutivos de formatação de texto CSS do W3C.
7. "text-decoration-thickness" | Posso usar... — Informações sobre o suporte a navegadores para a propriedade text-decoration-thickness.

Video

Navigation