Pseudoelementos

Nesta aula, você verá como utilizar os pseudoelementos para selecionar partes específicas do documento HTML. Os pseudoelementos permitem fornecer estilo a uma parte específica do elemento selecionado.

Os pseudoelementos devem ser definidos após o seletor e após as pseudoclasses (se existir) e precedidos por "::".

::first-letter

O pseudoelemento ::first-letter seleciona a primeira letra da primeira linha de um bloco. Veja no exemplo abaixo:

p::first-letter {
  font-size: 50px;
  color: blue;
}

No exemplo acima, a primeira letra dos elementos <p> será selecionada e terá seu estilo alterado. É possível combinar pseudoelementos com pseudoclasses para uma seleção ainda mais precisa. Acompanhe o exemplo abaixo:

p:first-child::first-letter {
  font-size: 50px;
  color: blue;
}

No exemplo acima, apenas a primeira letra do primeiro parágrafo (de um mesmo pai) será selecionada e, portanto, terá seu estilo alterado.

::before

O pseudoelemento ::before permite alterar conteúdo que precede o elemento selecionado. É frequentemente utilizado para adicionar conteúdo decorativo a um elemento, usando a propriedade "content". Veja o exemplo:

h2::before{
  content: url("img/before.png");
}

No exemplo acima, todos os elementos <h2> terão uma imagem precedendo-os (indicada por "img/before.png").

::after

Similarmente ao pseudoelemento ::before, existe o pseudoelemento ::after, que permite alterar conteúdo após o elemento selecionado. É frequentemente utilizado para adicionar conteúdo decorativo a um elemento, usando a propriedade "content". Veja o exemplo:

h2::after{
  content: url("img/after.png");
}

No exemplo acima, todos os elementos <h2> terão uma imagem na sequência (indicada por "img/after.png").

Para ver a lista completa de todos os pseudoelementos, consulte este link.