CSS Pseudo Elemento

Um pseudo-elemento CSS é uma palavra-chave adicionada a um seletor que permite que você estilize uma parte específica do elemento selecionado sem acesso ao HTML usando apenas o CSS.

Neste artigo vamos falar dos elementos citados abaixo:

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection

::after

Cria um pseudo-elemento que é o último filho do elemento selecionado. Muitas vezes é usado para adicionar e melhorar o conteúdo de um elemento como a propriedade content. É inline por padrão.

/* Adiciona uma seta DEPOIS os links */
a:after {
  content: "→";
}

::before

Cria um pseudo-elemento que é o primeiro filho do elemento atingido. É frequentemente utilizado para adicionar conteúdo decorativo à um element utilizando a propriedade content. Este elemento é inline por padrão.

/* Adiciona uma seta ANTES os links */
a:before {
  content: "→";
}

::first-letter

Esse elemento é utilizado quando queremos customizar a primeira letra de um paragrafo, <p> muito usado em portais de notícias para deixar a primeira letra com tamanho maior que as demais, dando destaque ao início do artigo

p:first-letter {
  font-size: 200%;
  color: #F24E1E;
}

::first-line

Esse elemento é usado para customizar a primeira linha de cada paragrafo <p>.

p:first-line   {
  color: #8A2BE2;
}

::selection

Esse elemento é utilizado para customizar a cor de seleção de um texto ou item na tela.

p:selection   {
  color: #8A2BE2;
  background: #8A2BE2;
}

Conclusão

Esses são os elementos mais usados no CSS, caso ainda tenha alguma dúvida deixe nos comentários abaixo que responderemos o mais rápido possível.

Espero ter ajudado 🙂