Coisas como a:linkou div::after...

Informações sobre a diferença parecem escassas.

A recomendação do seletor CSS 3 é bastante clara sobre ambos, mas tentarei mostrar as diferenças de qualquer maneira.

Pseudo-classes

Descrição oficial

O conceito de pseudoclasse é introduzido para permitir a seleção com base em informações que estão fora da árvore do documento ou que não podem ser expressas usando outros seletores simples.

Uma pseudoclasse sempre consiste em "dois pontos" ( :) seguido pelo nome da pseudoclasse e, opcionalmente, por um valor entre parênteses.

Pseudo-classes são permitidas em todas as sequências de seletores simples contidos em um seletor. Pseudo-classes são permitidas em qualquer lugar em sequências de seletores simples, após o seletor de tipo principal ou seletor universal (possivelmente omitido). Os nomes das pseudoclasses não diferenciam maiúsculas de minúsculas. Algumas pseudoclasses são mutuamente exclusivas, enquanto outras podem ser aplicadas simultaneamente ao mesmo elemento. As pseudoclasses podem ser dinâmicas, no sentido de que um elemento pode adquirir ou perder uma pseudoclasse enquanto o usuário interage com o documento.

Fonte

O que isto significa?

A natureza importante das pseudo-classes é afirmada na primeira frase: "o conceito de pseudo-classe [...] permite a seleção " . Ele permite que o autor de uma folha de estilo diferencie os elementos com base nas informações que "estão fora da árvore do documento" , por exemplo, o status atual de um link ( :active, :visited). Eles não são salvos em nenhum lugar no DOM e não existe uma interface DOM para acessar essas opções.

Por outro lado, :targetpode ser acessado via manipulação DOM (você pode usar window.location.hashpara encontrar o objeto com JavaScript), mas isso "não pode ser expresso usando os outros seletores simples" .

Então, basicamente, uma pseudo-classe irá refinar o conjunto de elementos selecionados como qualquer outro seletor simples em uma sequência de seletores simples . Observe que todos os seletores simples em uma sequência de seletores simples serão avaliados ao mesmo tempo. Para uma lista completa de pseudo-classes, verifique a recomendação do seletor CSS3.

Exemplo

O exemplo a seguir irá colorir todas as linhas pares de cinza ( #ccc), todas as linhas irregulares que não são divisíveis por 5 de branco e todas as outras linhas de magenta.

table tr:nth-child(2n) td{
   background-color: #ccc;
}

table tr:nth-child(2n+1) td{
   background-color: #fff;
}

table tr:nth-child(2n+1):nth-child(5n) td{
   background-color: #f0f;
}

Pseudo-elementos

Descrição oficial

Os pseudoelementos criam abstrações sobre a árvore do documento além daquelas especificadas pela linguagem do documento. Por exemplo, as linguagens dos documentos não oferecem mecanismos para acessar a primeira letra ou a primeira linha do conteúdo de um elemento. Os pseudoelementos permitem que os autores se refiram a essas informações de outra forma inacessíveis. Pseudo-elementos podem também fornecer autores uma maneira de se referir ao conteúdo que não existe no documento de origem (por exemplo, o ::beforee ::afterpseudo-elementos acesso a conteúdo gerado dar).

Um pseudoelemento é formado por dois pontos ( ::) seguidos do nome do pseudoelemento.

Esta ::notação é introduzida pelo documento atual com o objetivo de estabelecer uma discriminação entre pseudo-classes e pseudo-elementos. Para compatibilidade com folhas de estilo existentes, os agentes do usuário também devem aceitar a notação anterior de um dois-pontos para pseudo-elementos introduzidos nos níveis 1 e 2 do CSS (a saber,: primeira linha,: primeira letra,: antes e: depois). Esta compatibilidade não é permitida para os novos pseudo-elementos introduzidos nesta especificação.

Apenas um pseudo-elemento pode aparecer por seletor, e se estiver presente deve aparecer após a sequência de seletores simples que representam os assuntos do seletor.

Nota: Uma versão futura desta especificação pode permitir vários pseudo-elementos por seletor.

Fonte

O que isto significa?

A parte mais importante aqui é que "pseudo-elementos permitem que os autores se refiram a [..] informações de outra forma inacessíveis " e que "também podem fornecer aos autores uma maneira de se referir a conteúdo que não existe no documento de origem (por exemplo, o ::beforee os ::afterpseudo-elementos dão acesso ao conteúdo gerado). ". A maior diferença é que eles realmente criam um novo elemento virtual no qual as regras e até mesmo os seletores de pseudoclasse podem ser aplicados. Eles não filtram elementos, eles basicamente filtram conteúdo ( ::first-line, ::first-letter) e o envolvem em um contêiner virtual, que o autor pode estilizar como quiser (bem, quase).

Por exemplo, o ::first-linepseudo-elemento não pode ser reconstruído com JavaScript, pois depende muito da fonte usada atualmente, do tamanho das fontes, da largura dos elementos, dos elementos flutuantes (e provavelmente da hora do dia). Bem, isso não é totalmente verdade: ainda se pode calcular todos esses valores e extrair a primeira linha, no entanto, fazer isso é uma atividade muito complicada.

Acho que a maior diferença é que "apenas um pseudo-elemento pode aparecer por seletor" . A nota diz que isso pode estar sujeito a alterações, mas a partir de 2012 não acredito que vejamos nenhum comportamento diferente no futuro ( ainda está no CSS4 ).

Exemplo

O exemplo a seguir adicionará uma tag de idioma a cada citação em uma determinada página usando a pseudoclasse :lange o pseudoelemento ::after:

q:lang(de)::after{
    content: " (German) ";
}

q:lang(en)::after{
    content: " (English) ";
}

q:lang(fr)::after{
    content: " (French) ";
}

q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
    content: " (Unrecognized language) ";
}

TL; DR

As pseudo-classes atuam como seletores simples em uma sequência de seletores e, assim, classificam os elementos em características não-apresentacionais, os pseudo-elementos criam novos elementos virtuais.

Referências

W3C

• Seletores de nível 3
  • 4. Sintaxe do seletor
  • 6.6 Pseudo-classes
  • 7. Pseudo-elementos
• Especificação CSS 2.1 (desatualizada, mas ainda informativa)
  • 5.2 Sintaxe do seletor :

    Um seletor simples é um seletor de tipo ou seletor universal seguido imediatamente por zero ou mais seletores de atributo, seletores de ID ou pseudoclasses, em qualquer ordem. O seletor simples corresponderá se todos os seus componentes corresponderem.

  • 5.10 Pseudo-elementos e pseudo-classes

Uma pseudoclasse filtra os elementos existentes.
a:linksignifica todos os <a>que são :link.

Um pseudoelemento é um novo elemento falso.
div::aftersignifica elementos não existentes após <div>s.

::selectioné outro exemplo de um pseudoelemento.
Isso não significa todos os elementos selecionados; significa o intervalo de conteúdo selecionado, que pode abranger porções de vários elementos.

Breve descrição que me ajudou a entender a diferença:

• As pseudo classes descrevem um estado especial.
• Pseudoelementos correspondem a elementos virtuais.

Dos documentos do Sitepoint:

Uma pseudoclasse é semelhante a uma classe em HTML, mas não é especificada explicitamente na marcação. Algumas pseudoclasses são dinâmicas - são aplicadas como resultado da interação do usuário com o documento. - http://reference.sitepoint.com/css/pseudoclasses . Essas seriam coisas assim :hover, :active, :visited.

Os pseudoelementos correspondem a elementos virtuais que não existem explicitamente na árvore do documento. Os pseudoelementos podem ser dinâmicos, visto que os elementos virtuais que representam podem mudar, por exemplo, quando a largura da janela do navegador é alterada. Eles também podem representar o conteúdo gerado por regras CSS. - http://reference.sitepoint.com/css/pseudoelements . Essas seriam coisas assim before, :after, :first-letter.

Uma resposta conceitual:

• Um pseudoelemento se refere a coisas que fazem parte do documento, mas você simplesmente não sabe ainda. Por exemplo, a primeira letra. Antes você só tinha texto. Agora você tem uma primeira letra que pode ser direcionada. É um conceito novo, mas sempre fez parte do documento. Isso também inclui coisas como ::before; embora não haja conteúdo real lá, o conceito de algo antes de algo sempre esteve lá - agora você o está especificando.

• Uma pseudoclasse é o estado de algo no DOM. Assim como uma classe é uma tag que você associa a um elemento, uma pseudoclasse é uma classe que é associada pelo navegador ou DOM ou qualquer outro, geralmente como uma resposta a uma mudança de estado. Quando um usuário visita um link - esse link pode assumir o estado de 'visitado'. Você pode imaginar o navegador aplicando a classe 'visitada' ao elemento Âncora.:visitedseria então como você seleciona para aquela pseudoclasse.

Abaixo está a resposta simples:

Usamos a pseudoclasse quando precisamos aplicar css com base no estado de um elemento. Tal como:

1. Aplicar css ao passar o mouse sobre o elemento âncora (:hover )
2. Aplique css quando obtiver o foco em um elemento html ( :focus). etc.

Usamos o pseudoelemento quando precisamos aplicar css às partes específicas de um elemento ou a um conteúdo recém- inserido . Tal como:

1. Aplique o css à primeira letra ou primeira linha de um elemento (::first-letter )
2. Insira o conteúdo antes ou depois do conteúdo de um elemento ( ::before, ::after)

Abaixo está o exemplo de ambos:

<html>

 <head>
   <style>
   p::first-letter {  /* pseudo-element */
     color: #ff0000;
   }

   a:hover {          /* pseudo-class */
     color: red;      
   }
   </style>
 </head>

 <body>
   <a href="#" >This is a link</a>
   <p>This is a paragraph.</p>
 </body>

</html>

Pseudo-classe

Uma pseudoclasse é uma forma de selecionar certas partes de um documento HTML, com base, em princípio, não na própria árvore do documento HTML e seus elementos ou em características como nome, atributos ou conteúdo, mas em outras condições fantasmas, como codificação de linguagem ou estado dinâmico de um elemento.

A pseudoclasse original definiu os estados dinâmicos de um elemento que são inseridos e encerrados ao longo do tempo ou por meio da intervenção do usuário. CSS2 expandiu este conceito para incluir componentes de documentos conceituais virtuais ou partes inferidas da árvore de documentos, por exemplo, primeiro filho. As pseudo classes operam como se classes fantasmas fossem adicionadas a vários elementos.

RESTRIÇÕES: Ao contrário dos pseudo-elementos, as pseudo-classes podem aparecer em qualquer lugar na cadeia do seletor.

Exemplo de código de pseudoclasse:

a:link /* This selects any "a" element whose target has not been visited.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #99FF99; /* set to a pastel green */
border-top : 2px solid #ccffcc; /* highlight color */
border-left : 2px solid #ccffcc; /* highlight color */
border-bottom : 2px solid #003300; /* shadow color */
border-right : 2px solid #003300; /* shadow color */
}

a:visited /* This selects any "a" element whose target has been visited.*/
{ padding : 4px;
text-decoration : none;
color : #000000; /* black text color */
background-color : #ccccff; /* set to a lavender */
border-top : 2px solid #ffffff; /* highlight color */
border-left : 2px solid #ffffff; /* highlight color */
border-bottom : 2px solid #333366; /* shadow color *
border-right : 2px solid #333366; /* shadow color */
}

a:hover /* This selects any "a" element which is in a hover state. This is a state during pointer movement within the rendering region of an element. The user designates an element but does not activate it. */
{
color : #000000; /* black text color */
background-color : #99cc99; /* desaturated color */
border-top : 2px solid #003300; /* shadow color */
border-left : 2px solid #003300; /* shadow color */
border-bottom : 2px solid #ccffcc; /* highlight color */
border-right : 2px solid #ccffcc; /* highlight color */
}

a:focus /* This selects any "a" element which currently has focus. Focus is a state during which an element accepts keyboard input or other forms of text input. */
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ffff99; /* set to a pastel yellow */
border-top : 2px solid #ffffcc; /* highlight color */
border-left : 2px solid #ffffcc; /* highlight color */
border-bottom : 2px solid #666633; /* shadow color */
border-right : 2px solid #666633; /* shadow color */
}

a:active /* This selects any "a" element which is in a state of activation. Active is a state during pointer activation (eg: press and release of a mouse) within the rendering region of an element.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ff99ff; /* set to a pink */
border-top : 2px solid #ffccff; /* highlight color */
border-left : 2px solid #ffccff; /* highlight color */
border-bottom : 2px solid #663366; /* shadow color */
border-right : 2px solid #663366; /* shadow color */
}

Uma página que demonstra uma renderização do código da pseudoclasse acima

Pseudo-elementos

PSEUDO-ELEMENTS são usados ​​para endereçar subpartes de elementos. Eles permitem que você defina o estilo de uma parte do conteúdo de um elemento além do que está especificado nos documentos. Em outras palavras, eles permitem a definição de elementos lógicos que não estão realmente na árvore de elementos do documento. Os elementos lógicos permitem que a estrutura semântica implícita seja tratada nos seletores CSS.

RESTRIÇÕES: os pseudoelementos só podem ser aplicados a contextos externos e de nível de documento - não a estilos in-line. Os pseudoelementos são restritos quanto ao local em que podem aparecer em uma regra. Eles só podem aparecer no final de uma cadeia de seletores (após o assunto do seletor). Eles devem vir depois de qualquer classe ou nome de ID encontrado no seletor. Apenas um pseudoelemento pode ser especificado por seletor. Para endereçar vários pseudoelementos em uma estrutura de elemento único, várias instruções de seletor / declaração de estilo devem ser feitas.

Pseudoelementos podem ser usados ​​para efeitos tipográficos comuns, como capitulações iniciais e capitulares. Eles também podem abordar o conteúdo gerado que não está no documento de origem (com "antes" e "depois"). Segue-se um exemplo de folha de estilo de alguns pseudoelementos com propriedades e valores adicionados.

/ * A regra a seguir seleciona a primeira letra de um título 1 e define a fonte como 2em, cursiva, com fundo verde. A primeira letra seleciona a primeira letra / caractere renderizado para um elemento de nível de bloco. * /

h1:first-letter {
font-size : 2em;
font-family : "Lucida Handwriting", "Lucida Sans", "Lucida Console", cursive;
background-color : #ccffcc;
}

/* The following rule selects the first displayed line in a paragraph and makes it bold. First-line selects the first rendered line on the output device of a block-level element. */

p:first-line {
font-weight : bold;
}

/* The following rule selects any content placed before a blockquote and inserts the phrase "Quote of the day:" in bold small caps with a green background. */

blockquote:before {
content : "Quote of the day:";
background-color : #ccffcc;
font-weight : bold;
font-variant : small-caps;
}

/* The following rule selects any content placed before a "q" element and inserts the smart open quote. */

q:before {
content : open-quote;
}

/* The following rule selects any content placed after a "q" element and inserts the smart close quote. */

q:after{
content : close-quote;
}

Fontes: Link

Em resumo, das Pseudo-classes no MDN:

Uma pseudoclasse CSS é uma palavra-chave adicionada a um seletor que especifica um estado especial do (s) elemento (s) selecionado (s). Por exemplo,:hover pode ser usado para aplicar um estilo quando o usuário passa o mouse sobre um botão.

div: hover {
  cor de fundo: # F89B4D;
}

E, a partir de Pseudo-elementos no MDN:

Um pseudoelemento CSS é uma palavra-chave adicionada a um seletor que permite definir o estilo de uma parte específica do (s) elemento (s) selecionado (s). Por exemplo, ::first-linepode ser usado para estilizar a primeira linha de um parágrafo.

/ * A primeira linha de cada elemento <p>. * /
p :: primeira linha {
 cor azul;
 transformação de texto: maiúsculas;
}