Conteúdo de ::before e ::after
Insira conteúdo gerado antes ou depois dos elementos usando ::before e ::after com a propriedade content.
Conteúdo de ::before e ::after é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 1 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.
O que são pseudoelementos?
Os pseudoelementos criam elementos virtuais que são estilizados como se fizessem parte do DOM. Eles usam dois-pontos duplos ::. Os mais usados são ::before e ::after.
::before e ::after
::before insere conteúdo gerado antes do conteúdo de um elemento. ::after insere esse conteúdo depois. Ambos exigem a propriedade content para serem renderizados.
<span class="element">Text with generated content</span>A propriedade content
A propriedade content aceita:
- Uma cadeia de caracteres:
content: "text" - Cadeia de caracteres vazia:
content: ""(comum para formas decorativas) - URL:
content: url("icon.svg") - Contador:
content: counter(step) attr():content: attr(data-tooltip)
Aspas decorativas
Adicione aspas tipográficas sem incluí-las no HTML:
<blockquote>Design is not just what it looks like — design is how it works.</blockquote>Formas com content vazio
Definir content: "" com posição e dimensões cria formas decorativas sem HTML adicional:
<div class="card" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;margin-top:12px;">Card with a colored top bar drawn by ::before</div>Limpeza de flutuações com ::after
A técnica clássica de limpeza de flutuações usa ::after para limpar elementos flutuantes sem marcação adicional:
<div class="clearfix" style="border:1px solid #ccc;">
<div style="float:left;width:50%;background:#4f8cff22;padding:8px;">Floated column</div>
</div>Dica de ferramenta com ::after
Dica de ferramenta criada somente com CSS usando ::after e attr():
<span data-tooltip="Helpful hint" style="position:relative;display:inline-block;margin-top:24px;">Hover target</span>Ícone com content: url()
Insira um pequeno ícone antes dos links usando content: url():
<a href="https://example.com" target="_blank" rel="noopener">External link</a>Limitações dos pseudo-elementos
Os pseudo-elementos não fazem parte do DOM. Eles:
- Não podem ser selecionados nem pesquisados pelos usuários
- Não são acessíveis aos leitores de tela por padrão
- Não podem ser direcionados pelo JavaScript
Nunca coloque conteúdo essencial em conteúdo gerado — use pseudo-elementos somente para fins decorativos.
Dois-pontos simples versus duplos
Os dois-pontos simples (:before) eram a sintaxe do CSS2. Os dois-pontos duplos (::before) são o padrão do CSS3, que distingue pseudo-elementos de pseudo-classes. Ambos funcionam nos navegadores modernos, mas use dois-pontos duplos em códigos novos.
Quais elementos são compatíveis com ::before/::after
Elementos substituídos (img, input, select, video) não podem ter pseudo-elementos porque não possuem uma área de conteúdo na qual inseri-los. Em vez disso, use um elemento contêiner para a decoração.
Verificação rápida
Qual valor de content é necessário para um pseudo-elemento ::before decorativo sem texto visível?
Recapitulação
::before e ::after inserem conteúdo gerado ao redor do conteúdo real de um elemento. A propriedade content é necessária. Use-os para formas decorativas, ícones, aspas e dicas de ferramenta — mas nunca para conteúdo significativo que os usuários precisem acessar ou ler.
Perguntas Frequentes
A aula “Conteúdo de ::before e ::after” é grátis?
Sim — o texto completo de “Conteúdo de ::before e ::after” é 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 “Conteúdo de ::before e ::after”?
Insira conteúdo gerado antes ou depois dos elementos usando ::before e ::after com a propriedade content. 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 1 de 4.
Quanto tempo leva a aula “Conteúdo de ::before e ::after”?
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