Pseudo

clases (:)

Definen el estilo de un estado especial de un elemento.

Ejemplos: :hover, :active, :not, :focus, etc.

:focus sirve para indicar, mediante la aparición de unos bordes concretos (outline), que el usuario ha clickado o seleccionado el elemento.
Para eliminar (también se puede cambiar el color) los que vienen por defecto del navegador, como en los botones por ej., hacer lo siguiente:
button:focus { outline: none; }

:active sirve para indicar el estado de un elemento cuando se está manteniendo pulsado. Ej.:
button:active { background: red; }

:not sirve para indicar que NO lleve el estilo aplicado el selector que se establezca, ya sea una tag, una clase, id, etc.
Ej.: p:not(.fancy) { color: green; } --> Los elementos p que no lleven la clase .fancy recibirán el color: green;
Es mejor no utilizar :not a ser posible y estilizar en positivo.

elementos (::)

Definen el estilo de una parte específica de un elemento.

Ejemplos: ::after, ::before, etc.

::after explicación: https://developer.mozilla.org/es/docs/Web/CSS/::after