Atributo content do CSS

Definição e uso

A propriedade content é usada em conjunto com os pseudo-elementos :before e :after para inserir conteúdo gerado.

Explicação

Esta propriedade é usada para definir o conteúdo gerado que é colocado antes ou após o elemento. Por padrão, isso geralmente é conteúdo inline, mas o tipo de caixa criado pelo conteúdo pode ser controlado pela propriedade display.

Veja também:

Manual do CSS:Pseudo-elemento :before do CSS

Manual do CSS:Pseudo-elemento :after do CSS

Manual do HTML DOM:Propriedade content

Exemplo

O exemplo a seguir insere colchetes com a URL após cada link:

a:after
  {
  content: " (" attr(href) ")";
  }

Experimente você mesmo

Sintaxe do CSS

content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;

Valor do atributo

Valor Descrição
none 　
normal 　
especificações de content 　
inherit Determina que o valor da propriedade content deve ser herdado do elemento pai.

Detalhes técnicos

Valor padrão: normal
Herança: não
Versão: CSS2
Sintaxe do JavaScript: object.style.content="url(beep.wav)"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.0 1.0 4.0