Elemento pseudo ::before do CSS

Definição e uso

CSS ::before O pseudo-elemento é usado para inserir algum conteúdo antes do conteúdo do elemento especificado.

Usar 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:Atenção, o conteúdo inserido ainda está dentro do elemento especificado. O conteúdo inserido será adicionado antes do outro conteúdo interno do elemento.

Usar ::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: "Read this: ";
}

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: "Read this -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Experimente você mesmo

Sintaxe do 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:Elemento pseudo do CSS

Referência:Elemento pseudo ::after do CSS