Manual de Referência do Pseudo-elemento CSS

Pseudo-elementos CSS

Os pseudo-elementos CSS são usados para definir o estilo de partes específicas do elemento.

Por exemplo, pode ser usado para:

  • Define o estilo da primeira letra ou primeira linha do elemento
  • Insere conteúdo antes ou após o conteúdo do elemento
  • Define o estilo da marca do item da lista
  • Define o estilo da visão de fundo do diálogo

A tabela a seguir mostra diferentes pseudo-elementos no CSS:

Elemento pseudo Exemplo Descrição do exemplo
::after p::after Insere conteúdo após o conteúdo do elemento especificado.
::backdrop dialog::backdrop Define o estilo da visão de fundo do diálogo ou elemento emergente.
::before p::before Insere conteúdo antes do conteúdo do elemento especificado.
::file-selector-button ::file-selector-button Seleciona o botão do seletor de arquivo do tipo <input type="file">.
::first-letter p::first-letter Seleciona a primeira letra de cada elemento <p>.
::first-line p::first-line Seleciona a primeira linha de cada elemento <p>.
::grammar-error ::grammar-error Define o estilo de texto marcado como erro de sintaxe pelo navegador.
::highlight() ::highlight(custom-name) Seleciona o realce personalizado.
::marker ::marker Marca o item da lista selecionado.
::placeholder input::placeholder Define o estilo do texto de placeholder para elementos <input> ou <textarea>.
::selection ::selection Define o estilo do texto selecionado pelo usuário.
::spelling-error ::spelling-error Define o estilo de texto marcado como erro de digitação pelo navegador.
::view-transition ::view-transition Representa a raiz da sobreposição de transição de vista, contendo todas as transições de vista na página.
::view-transition-group ::view-transition-group Representa um grupo de capturas de tela de transição de vista única.
::view-transition-image-pair ::view-transition-image-pair O contêiner de estado de vista “antigo” e “novo” de transição de vista (antes e depois da transição).
::view-transition-new ::view-transition-new Estado de vista 'novo' que representa a transição de vista.
::view-transition-old ::view-transition-old Estado de vista 'antigo' que representa a transição de vista.