Dúvida

Oi Eduardo,

Vou primeiro definir o que é um elemento e uma classe quando falamos de código HTML e CSS: no front-end é comum chamar o pedaço demarcado por uma "tag" no HTML de "elemento". Podemos chamar o seguinte código html de "elemento":

<p class="texto">
    bla bla bla bla bla
<p>

Esse elemento tem um conteúdo "bla bla bla bla bla", uma classe "texto" e o nome da tag que demarca ele é "p". É comum chamarmos o elemento pelo nome da tag, no caso podemos chamá-lo de elemento "p".

Sobre a classe, esse elemento "p" tem uma classe "texto". Classes são o que colocamos dentro do atributo class das tags no html, e também o que podemos usar para selecionar tags no CSS :

.texto { estilo do texto }

Classe não é o atributo class="". Classes são o que colocamos dentro do atributo class="".

Temos definido assim o que é um elemento e o que é uma classe. Ambos são escritos e declarados no código HTML.

Um pseudoelemento e uma pseudoclasse do CSS, respectivamente querem dizer que são elementos e classes que não estão escritos no código HTML. Quem cria essas classes e esses elementos é o navegador e não quem está desenvolvendo.

Vou tentar explicar o porque delas existirem. Vou voltar pro nosso elemento "p":

<p class="texto">
    bla bla bla bla bla
<p>

Se eu quiser trocar a cor do texto pra vermelho, teria que selecionar ele no CSS e mudar a propriedade color:

.texto {
    color: red
}

E se eu quiser trocar a cor para vermelho só quando o usuário passar o mouse por cima do elemento "p"? Temos que ter um seletor no CSS que identifique que só queremos o vermelho caso o mouse esteja em cima do elemento.

O navegador coloca uma classe hover em qualquer elemento no qual o mouse passa por cima. Quando o mouse passa por cima do nosso elemento "p", o navegador deixa nosso elemento assim:

<p class="texto hover">
    bla bla bla bla bla
<p>

Quando o mouse sai do elemento "p", ele volta ao normal:

<p class="texto">
    bla bla bla bla bla
<p>

Se no CSS, nosso código estivesse assim:

.texto.hover {
    color: red
}

a cor vermelha só seria usada enquanto o mouse estivesse em cima do elemento "p".

Se você olhar o código HTML, verá que essa classe na verdade não é colocada no atributo class="" do elemento "p". Ela está escondida no elemento "p". Por isso é chamada de pseudo-classe. Por ser uma pseudo-classe, e não estar colocada no atributo class="', o navegador resolveu identificá-la de uma maneira diferente no CSS. Na verdade o código fica assim:

.texto:hover {
    color: red
}

Agora, no caso do pseudo-elemento, temos a mesma ideia, porém aplicada num pedaço específico de um elemento, e não no elemento inteiro. Se quiséssemos mudar o tamanho da primeira letra do conteúdo do elemento "p", teríamos que marcá-lo no html e selecioná-lo no CSS para estilizar:

HTML

<p class="texto">
    <span class="primeira-letra">b</span>
    la bla bla bla bla
<p>

CSS

.texto .primeira-letra{
    font-size: 40px;
}

Podemos dizer que criamos um elemento "span", dentro do elemento "p". Se não quiser ter o trabalho de ir no html pra criar esse elemento, você pode aproveitar que o CSS já criou esse elemento pra você e usar esse elemento. Esse elemento é na verdade um pseudo-elemento, o que significa que ele está lá, mas não visível no seu código HTML. Seu elemento "p" pode continuar como antes:

<p class="texto">
    bla bla bla bla bla
<p>

No CSS você pode acessar o pseudo elemento first-letter dentro do elemento "p":

.texto::first-letter{
    font-size: 40px;
}

Note que diferenciei pseudo-classes usando : e pseudo-elementos usando::. Na prática é válido e comum usar apenas : para os dois casos:

.texto:hover {
    color: red
}

.texto:first-letter{
    font-size: 40px;
}

Usando : pra tudo, a diferença entre pseudo-elementos e pseudo-classes acaba ficando no campo das ideias e no conceito na maioria das vezes.

Porém, como pseudo elementos são praticamente tags, temos a oportunidade de adicionar conteúdo em alguns deles via CSS, o que não ocorre em nenhuma pseudo-classe.

É bem comum adicionarmos conteúdo em pseudo-elementos ::before e ::after. Vou dar o exemplo de um link seguro onde queremos colocar um cadeado ao lado antes do texto do link:

🔒 Comprar

<a href="#" class="link-seguro" >
    &#128274; Comprar
</a>

Tivemos que alterar o conteúdo do link e adicionar o cadeado. Esse cadeado é um conteúdo do link, porém, também é uma decoração. E se quisermos reaproveitar isso para todos os links seguros do site, podemos fazer isso apenas modificando o CSS:

<a href="#" class="link-seguro" >
    Comprar
</a>

.link-seguro::before {
    content: "\1F512";
}