Propriedade Generated Content
Última atualização: 2026-09-13
content Propriedade Generated Content
A propriedade content insere conteúdo gerado antes ou depois de um elemento e é exigida pelos pseudo-elementos ::before e ::after. Ela pode inserir strings, imagens, valores de contador ou valores de atributo, e é usada com frequência para adicionar conteúdo decorativo, limpar floats ou mostrar URLs de links sem alterar o HTML.
| Categoria | |
|---|---|
| Valor Inicial | normal |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS2 |
| Status | Padrão |
📝 Sintaxe
content: normal | none | <string> | <image> | counter() | attr() | open-quote | close-quote | no-open-quote | no-close-quote;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
normal | none | <string> | <image> | counter() | attr() | open-quote | close-quote | no-open-quote | no-close-quote | Palavra-chave | Conteúdo gerado |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| content | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： content só tem efeito nos pseudo-elementos ::before e ::after; omiti-lo significa que o pseudo-elemento nem é gerado.
Importante： O conteúdo inserido via content não é lido por leitores de tela, então ele não deve conter informação crítica para entender a página.
❓ Perguntas Frequentes
QQual é a diferença entre a propriedade content e escrever direto no HTML?
AO conteúdo inserido via content vive na camada de apresentação: não faz parte do DOM, não pode ser selecionado ou copiado e não é indexado por mecanismos de busca — bom para decoração (ícones, símbolos de prefixo/sufixo, números de contador). O conteúdo com informação crítica deve estar no HTML, e como leitores de tela podem não anunciar o conteúdo gerado, ele não deve transmitir a semântica central.
QComo insiro uma imagem com content?
AUse content: url(image.png); para colocar uma imagem na posição do pseudo-elemento, útil para pequenos ícones antes de links ou títulos. Mas url() não dá controle sobre tamanho ou alinhamento. Prefira content: "" com background-image mais background-size, uma fonte de ícone ou um SVG inline.
QPor que ::before/::after sempre precisam de content: ""?
AUm pseudo-elemento só é gerado quando content é definido, mesmo uma string vazia ""; caso contrário, todo o pseudo-elemento não é renderizado. Usos comuns de um content vazio: desenhar elementos decorativos com position, limpar floats (content: "" + display: table) ou reservar espaço para um ícone de fundo. content é efetivamente o 'interruptor' que liga um pseudo-elemento.
QQuais valores content suporta?
AStrings (por exemplo, "✓"), imagens via url(), contadores via counter(name)/counters(), valores de atributo via attr(href), as palavras-chave de aspas open-quote/close-quote, e normal e none. attr() só lê atributos do tipo string; é comumente usada em estilos de impressão para mostrar a URL completa após links.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Pseudo-elemento ::before
Insere conteúdo gerado antes de um elemento
Propriedade counter-increment
Use com content para numeração automática
