Elemento pseudo-CSS ::before

Definição e uso

CSS ::before Os pseudo-elementos são usados para inserir algum conteúdo antes do conteúdo do elemento especificado.

Uso content O atributo especifica o conteúdo a ser inserido. O valor de content pode ser:

• String: content: "Hello world!";
• Imagem: content: url(myimage.jpg);
• Sem conteúdo: content: none;
• Contador: content: counter(li);
• Aspas: content: open-quote;
• Valor do atributo: content: " (" attr(href) ")";

Dica:Observe que o conteúdo inserido ainda está dentro do elemento especificado. O conteúdo inserido será adicionado antes do outro conteúdo interno do elemento.

Uso ::after Insira algum conteúdo após o conteúdo de um elemento específico.

Exemplo

Exemplo 1

Insira uma string antes do conteúdo de cada elemento <p>:

p::before {
  content: "Leia isso: ";
}

Experimente você mesmo

Exemplo 2

Insira uma string antes do conteúdo de cada elemento <p> e defina o estilo do conteúdo inserido:

p::before {
  content: "Leia isso -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Experimente você mesmo

Sintaxe CSS

::before {
  declarações css;
}

Detalhes técnicos

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente o pseudo-elemento.

Páginas relacionadas

Tutorial:Elementos pseudo-CSS

Referência:Elemento pseudo-CSS ::after