Uma pseudo-classe CSS é uma palavra-chave adicionada às declarações de um seletor após um sinal de dois pontos e especificam um estado especial de um elemento. Existem várias pseudo-classes para estilos, podemos citar :hover, :visited, :active, :checked, :empty e :focus.
Já um pseudo-elemento CSS é uma palavra-chave adicionada às declarações de um seletor após dois sinais de dois pontos e permitem que você formate um pedaço específico do elemento referenciado. Os principais pseudo-elementos usados nas CSS são ::before, ::after, ::first-letter, ::first-line.
Irei agora criar um exemplo personalizando links. Normalmente um link por padrão vem formatado assim.
Agora, este é um link personalizado.
Para ver o código fonte desse exercício, acesse o meu repositório (esse é um link ainda mais personalizado).
Logo abaixo, temos um conteúdo especial estilizado, que será mostrado ao passar o mouse sobre ele.
PARABÉNS, ESTE É O CONTEÚDO ESPECIAL!