What is the difference between pseudo-classes and pseudo-elements?

Pseudo-classes : it is applied automatically by the browser depending on the position of the element or its interactive state.

For Example :

E:hover Matches elements of type E when the cursor is hovering over it.

Pseudo-elements : It is applies styles to content based on its position in the HTML hierarchy.

For Example :

E::first-letter This applies a style to the first letter of the first line inside a block-level element E.

So ,

The CSS3 Selectors specification prefixes pseudo-elements with two colons instead of one. So, :first–letter becomes ::first-letter and :first-line becomes ::first-line. IE 8 and earlier don’t understand the double-colon prefix, so you need use the single-colon versions to avoid styles breaking in older browsers.

From https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements

Pseudo-class :

A CSS pseudo-class is a keyword, preceded by a colon (:), added to the end of selectors to specify you want to style the selected elements, and only when they are in certain state. For example, you might want to style an element only when it is being hovered over by the mouse pointer, or a checkbox when it is disabled or checked, or an element that is the first child of its parent in the DOM tree.

Examples:

• :active
• :checked
• :nth-child()
• :first
• :hover

Pseudo-elements ::

Pseudo-elements are very much like pseudo-classes, but they have differences. They are keywords, this time preceded by two colons (::), that can be added to the end of selectors to select a certain part of an element.

Examples:

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection
• ::backdrop

As stated by @stephanmg:

In practice ::before is used as :before and ::after is used as :after because of browser compatibility. Both are pseudo-elements, but may look like pseudo classes. This might be confusing if you read CSS code.