Pseudo-elementos ::before e ::after no CSS

Os pseudo-elementos são utilizados para estilizar partes de um elemento, e no nosso caso, com :before e :after inserir conteúdo antes ou após um elemento. Puramente com CSS, sem a necessidade de criarmos novos elementos no HTML.

Vamos a sintaxe:

seletor::after {
content: '';
}
seletor::before {
content: '';
}

O :: é a notação para pseudo-elementos, diferente dos simples dois pontos (:) que usamos para pseudo-classes como o :hover.

::before cria o pseudo-elemento antes do elemento selecionado
::after cria o pseudo-elemento após o elemento selecionado

Vejamos um exemplo:

Lindo caminhão feito com CSS

<div class=”a”></div>
<div id=”triangle”></div>

Com o HTML acontece o seguinte: temos a div.a que forma um retângulo e a div#triangle que forma um triangulo. Ok, mas e as rodas? CSS! Vamos lá:

Notem que, criamos as rodas sem a necessidade de mais divs, e é claro que não ficamos limitados apenas a círculos, podemos fazer o que quisermos! Linhas superiores, inferiores, o que a nossa criatividade desejar.

O primeiro passo foi selecionar o elemento que o pseudo-elemento iria se relacionar (no caso a div com a classe a).
A propriedade “content: ‘ ‘;” indica qual conteúdo será inserido e é obrigatória para que o pseudo-elemento apareça (podemos colocar strings, imagens com url(), counter() ou nada, que é o nosso caso) . Outro detalhe é que por padrão a propriedade display é setada como inline.
A partir daí é só configurarmos com as já conhecidas propriedades do CSS para deixarmos da maneira que desejamos. Bacana né?

Curtiu o artigo? Então esmaga a palminha /o/
Espero ter ajudado e até a próxima!