O que é um pseudo-elemento?

O pseudo-elemento em CSS é uma palavra-chave adicionada a um seletor, permitindo estilizar uma parte específica do elemento sem criar explicitamente elementos adicionais no DOM.

Os pseudo-elementos mais utilizados são:

• ::before: Insere conteúdo gerado antes do conteúdo do elemento selecionado.
• ::after: Insere conteúdo gerado após o conteúdo do elemento selecionado.
• ::first-line: Aplica estilos à primeira linha de um elemento de bloco.
• ::first-letter: Aplica estilos à primeira letra de um elemento de bloco.
• ::selection: Aplica estilos à parte do elemento que o usuário selecionou (por exemplo, ao destacar texto com o mouse).
• ::placeholder: Aplica estilos ao texto de espaço reservado em campos <input> ou <textarea>.

Exemplo de uso de ::before e ::after:

div::before {
  content: "Prefixo: "; // Propriedade content obrigatória
  color: blue;
}

div::after {
  content: " Sufixo"; // Propriedade content obrigatória
  color: red;
}

Exemplo de uso de ::first-line e ::first-letter:

p::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 0.1em;
}

Os pseudo-elementos são úteis para adicionar elementos decorativos, gerar conteúdo, estilizar partes do texto e outras tarefas, simplificando a estrutura HTML. Historicamente, começavam com um único dois pontos (:), mas a especificação CSS3 introduziu dois pontos (::) para distinguir entre pseudo-classes (:hover, :focus) e pseudo-elementos, embora um único dois pontos ainda seja suportado pela maioria dos navegadores para pseudo-elementos antigos. Recomenda-se usar ::.