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

Question

What is the different between div::after {} and div:after {} ? When do we have to use :: over :?

D

Answer 1

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.