Pseudo-elementos parte 1: o que são?

Desde que ingressei ao time de desenvolvimento da Alura, educação se tornou parte do meu dia-a-dia. Aprender já fazia parte do meu cotidiano, mas agora me sinto confiante o suficiente para passar meu conteúdo para frente, também. Então hoje, decidi começar uma série de posts sobre pseudo-elemento.

O que é um pseudo-elemento?

Pseudo é uma palavra de origem grega que significa, literalmente, mentira ou falsidade. Na língua portuguesa usamos pseudo como um prefixo para indicar algo cujo conteúdo é irreal ou falso. Por exemplo, pseudônimo é um nome falso que um escritor usa. Pseudociência é uma ciência falsa.

Em CSS, não seria diferente. Um pseudo-elemento é um seletor que permite que você atribua um estilo à uma específica parte do seu CSS. Vamos lá?

Quais são os pseudo-elementos que posso usar no CSS?

Os pseudo elementos disponíveis atualmente são diversos, mas hoje focaremos nos mais importantes e os que usamos com mais frequência. Esses são before, after, first-line, first-letter e first-child. Sim, existem mais, mas esses são os que você mais precisa conhecer.

::first-child, ::last-child e ::nth-child

Essas são marcações que devem ser usadas quando se quer afetar apenas um dos filhos de determinada classe, sem especificar seu nome, apenas informando sua ordem dentro do elemento pai.

Por exemplo, .pai::first-child vai afetar somente o primeiro filho da classe pai, enquanto os demais filhos não sofrerão mudança alguma. Já .pai::nth-child(5), o quinto filho. Se substituirmos o número por odd ou even, afetaremos classes de números ímpares ou pares, respectivamente.

First-line e first-letter seguem a mesma regra, mas ao invés de afetar os primeiros filhos de determinado elemento, afetam a primeira linha ou letra de determinado texto. Recomendá-se usá-lo atrelado a uma marcação de parágrafo, ou seja, p.

::before e ::after

Before e after são pseudo elementos que, quando atribuídos a um elemento normal, cria um first-child ou last-child ao elemento ou classe selecionado.

Por exemplo, imagine que eu tenho uma classe chamada mae, e que essa classe mae tivesse uma filha chamada filha. Se eu criar, no CSS, a marcação “.mae::before“, eu estarei criando um pseudo-elemento que virá antes da classe filha, dentro da classe mae.

.mae {
   color:white;
   background:pink;
}
.filha::before {
   content:"oie";
}

O mesmo efeito acontece com ::after, com a diferença de que um last-child é inserido.

Essa é a primeira parte da minha mini-série de provavelmente duas partes sobre pseudo-elementos. No próximo post sobre o assunto explico quando usar os pseudo-elementos em: Pseudo-elementos parte 2: quando usar?