CSS ::before Pseudo-Elemento

O pseudo-elemento CSS ::before cria um elemento gerado que é inserido como o primeiro filho do elemento-alvo, antes do seu conteúdo real. É um dos dois pseudo-elementos de "conteúdo gerado" (o seu espelho é ::after), e é mais frequentemente utilizado para adicionar ícones decorativos, rótulos, contadores, aspas ou ornamentos visuais sem modificar o HTML.

Esta página aborda o que o ::before faz, a propriedade sem a qual ele não existe, exemplos executáveis, os padrões mais comuns no mundo real e os problemas de acessibilidade que você precisa conhecer.

Como funciona o `::before`

Um pseudo-elemento ::before só é renderizado quando você também declara a propriedade content — esse valor é o que será inserido. Sem content, nada aparece (nem mesmo uma caixa vazia).

Comportamentos principais:

Inline por padrão. Como um <span>, ele fica inline com o texto ao redor até que você altere seu display (por exemplo, para inline-block ou block).
É uma caixa real. Você pode estilizá-lo, animá-lo, posicioná-lo ou flutuá-lo como qualquer outro elemento, e ele herda os estilos do elemento ao qual pertence.
Vem primeiro. O ::before é inserido antes do conteúdo do elemento; o ::after é inserido depois. Ambos ficam dentro do elemento, entre suas tags.
A sintaxe de dois pontos ainda funciona. A sintaxe legada :before (um dois-pontos) é equivalente e era o que os navegadores muito antigos entendiam. O ::before com dois pontos duplos é o padrão moderno que distingue pseudo-elementos de pseudo-classes — prefira-o.

Informação

::before e ::after não funcionam em elementos substituídos como <br>, <img>, <input> ou <video>, porque esses elementos não possuem conteúdo de documento ao redor do qual o conteúdo gerado possa ser inserido.

Sintaxe

selector::before {
  content: "value"; /* required */
  /* other declarations */
}

O valor de content pode ser uma string literal, uma imagem (url(...)), um valor de atributo (attr(...)) ou um contador (usado em conjunto com counter-increment). Para uma caixa puramente decorativa sem texto, use uma string vazia: content: "".

Exemplos

Inserir um rótulo de texto antes do conteúdo

Aqui o ::before adiciona uma string fixa antes de cada parágrafo:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before { 
        content: "  William Shakespeare -";
      }
    </style>
  </head>
  <body>
    <h2>::before selector example</h2>
    <p>"Be or not to be".</p>
  </body>
</html>

Experimente Você Mesmo »

O texto inserido "William Shakespeare -" aparece diretamente antes da citação, mesmo não existindo em nenhum lugar do HTML.

Estilizar a caixa gerada

Como o pseudo-elemento é uma caixa, você pode atribuir a ele um fundo, borda e valor de display assim como faria com um elemento normal:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before { 
        content: "William Shakespeare-";
        display: inline-block;
        background-color: #ccc;
        color: #666;
        border: 2px dotted #000;
      }
    </style>
  </head>
  <body>
    <h2>::before selector example</h2>
    <p>"Be or not to be".</p>
  </body>
</html>

Experimente Você Mesmo »

Casos de uso comuns

O ::before se destaca sempre que você precisa de decoração que não pertence à marcação:

Ícones e marcadores — adicione um símbolo (content: "★") ou uma imagem url() antes de links, itens de lista ou botões.
Marcadores de campo obrigatório — adicione um asterisco vermelho a rótulos: label.required::before { content: "*"; color: red; }.
Aspas de abertura — envolva blockquotes com aspas tipográficas.
Contadores — combine com counter-increment para numerar seções automaticamente.
Extrair valores de atributos — exiba o atributo do próprio elemento com attr():

abbr[title]::before {
  content: attr(title) ": ";
  font-weight: bold;
}

Acessibilidade e pontos de atenção

content é obrigatório. Se você esquecê-lo, o pseudo-elemento não será gerado.
Caixas decorativas precisam de content: "". Para um elemento puramente visual (um divisor, um fundo de ícone) defina uma string vazia para que a caixa ainda seja renderizada.
O texto gerado não é selecionável e a maioria dos leitores de tela o ignora ou o lê de forma inconsistente. Nunca coloque informações que o usuário precisa ter (como instruções críticas) somente no ::before.
Não se aplica a elementos substituídos (<img>, <input>, <br>, etc.).
O ponto de inserção importa. O ::before é o primeiro filho dentro do elemento — não antes da tag de abertura do elemento.

Nota

Para pseudo-elementos puramente decorativos, sempre defina content: '' para garantir que sejam renderizados corretamente em todos os navegadores.

Suporte a navegadores

O ::before é suportado em todos os navegadores modernos. A forma de um único dois-pontos (:before) também é amplamente suportada e era a sintaxe usada antes do CSS3, portanto, use-a apenas se precisar suportar navegadores muito antigos.

Referências relacionadas

::after — insere conteúdo após um elemento.
content — a propriedade que define o que o ::before insere.
counter-increment — cria numeração automática com conteúdo gerado.
position — posiciona um elemento gerado com precisão.

Prática

O que o pseudo-elemento '::before' faz no CSS?

Ele insere conteúdo antes do conteúdo do elemento selecionado.Ele oculta o conteúdo antes do elemento selecionado.Ele altera a cor do elemento selecionado.Ele é usado para estilizar o elemento selecionado antes de qualquer outro estilo ser aplicado.

Como funciona o ::before