Pseudo elementos e Pseudo Classes

Uma Pseudo Classes muda o "ESTADO" de um elemento HTML. Exemplo bem prático é quando usamos no CSS um

a:hover { text-decoration: underline; }

o :hover é uma Pseudo-Classes que irá mudar o elemente tag quando passamos o mouse por cima do o estado do elemento irá mudar para underline, assim a pseudo classes alterou o estado do elemento html

Diferente é Pseudo elemento que não muda estado de um elemento, mas insere informações/alterações ao elemento html. Usando mesmo exemplo anterior num CSS usando o

a::before { content: "»»»"; color: red; }

inserimos as »»» em cor vermelha para, por exemplo, indicar um link