What the difference between two double point and one in pseudo-selector

Question

I am a bit do not understand what is the difference between :before and ::before for example. Which one should I use?

Answer 1

This is to differentiate between pseudo-classes (such as :hover, :focus, :active) and pseudo-elements (such as ::before, ::after, ::first-line).

This is introduced as part of CSS3, by the World Wide Web Consortium (the W3C), but because pseudo-elements were introduced prior to this syntactic differentiation browsers support both ::before and :before.

According to the reference at the MDN (Mozilla Developer Network):

Browser            |  Lowest Version    |    Support of
-------------------+--------------------+------------------
Internet Explorer  |  8.0               |   :pseudo-element
                   +--------------------+------------------
                   | 9.0                |   :pseudo-element
                   |                    |   ::pseudo-element
-------------------+--------------------+------------------
Firefox (Gecko)    | 1.0 (1.0)          |  :pseudo-element
                   +--------------------+------------------
                   | 1.0 (1.5)          |  :pseudo-element
                   |                    |  ::pseudo-element
-------------------+--------------------+------------------
Opera              | 4.0                |  :pseudo-element
                   +--------------------+------------------
                   | 7.0                |  :pseudo-element
                   |                    |  ::pseudo-element
-------------------+--------------------+------------------
Safari (WebKit)    | 1.0 (85)           |  :pseudo-element
                   |                    |  ::pseudo-element
-------------------+--------------------+------------------

Note, from the CSS Selectors Recommendation:

This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements.
For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after).
This compatibility is not allowed for the new pseudo-elements introduced in this specification.

References:

• CSS 2.1 Recommendation.
• Pseudo-elements.

Answer 2

::before is the more modern version. Everything starting with :: is a pseudo-element and everything starting with : is a pseudo-class. This distinction has been only made since CSS3.

Use ::before to use this new standard version or use :before for backwards-compatibility, as all browsers understand :before but not all of them understand ::before.