Padrões Decorativos com Pseudo-elementos
Crie formas decorativas, divisores e sobreposições usando ::before e ::after, sem HTML adicional.
Padrões Decorativos com Pseudo-elementos é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Filosofia da decoração somente com CSS
Os pseudo-elementos permitem efeitos decorativos elaborados sem HTML adicional. O objetivo é usar zero elementos div para decoração — todo o embelezamento visual deve ficar no CSS.
Triângulo com CSS
Crie triângulos usando elementos sem tamanho e bordas transparentes:
<div class="triangle"></div>Seta de dica de ferramenta
Uma seta de dica de ferramenta usando ::before:
<div class="tooltip" style="position:relative;display:inline-block;background:#333;color:#fff;padding:6px 12px;border-radius:4px;margin-top:16px;">Tooltip text</div>Divisor diagonal de seção
Uma divisão inclinada de seção usando skew ou clip-path em ::after:
<div class="section" style="background:linear-gradient(135deg,#4f8cff,#7ee787);height:120px;position:relative;"></div>Sublinhados decorativos
Efeitos de sublinhado animados usando ::after:
<a href="#">Hover me (underline animates in on :hover)</a>Distintivo com ::after
Uma sobreposição de distintivo de notificação sem elementos HTML adicionais:
<span class="nav-icon" data-count="3" style="position:relative;display:inline-block;font-size:1.5rem;margin:16px;">🔔</span>Sobreposição de gradiente em imagens
Sobreposição de gradiente escuro sobre imagens para facilitar a leitura do texto:
<div class="card-image" style="width:100%;height:160px;background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>Marca de seleção com ::before
Uma marca de seleção personalizada desenhada com bordas CSS:
<div class="custom-check" style="width:20px;height:20px;background:#34c759;border-radius:4px;padding:2px;"></div>Faixa decorativa
Um efeito de faixa em cartões usando ::before com posicionamento negativo:
<div class="card featured" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;width:200px;">Featured product</div>Efeito cintilante de carregamento
Um efeito cintilante de carregamento esquelético criado com CSS, sem JavaScript:
<div class="skeleton" style="width:100%;height:60px;border-radius:6px;"></div>Verificação rápida
Qual combinação de propriedades cria um triângulo apontado para cima somente com CSS?
Recapitulação
Os pseudo-elementos permitem criar padrões decorativos elaborados sem HTML adicional: setas, sobreposições, sublinhados animados, distintivos, faixas e efeitos cintilantes. Todos dependem de content: "" + position: absolute + uso criativo de bordas, clip-path e transformações.
Perguntas Frequentes
A aula “Padrões Decorativos com Pseudo-elementos” é grátis?
Sim — o texto completo de “Padrões Decorativos com Pseudo-elementos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Padrões Decorativos com Pseudo-elementos”?
Crie formas decorativas, divisores e sobreposições usando ::before e ::after, sem HTML adicional. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Padrões Decorativos com Pseudo-elementos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Conteúdo de ::before e ::after
- ::placeholder ::selection e ::marker
- Contadores CSS com ::before
- Padrões Decorativos com Pseudo-elementos