The difference between a colon and two colons in CSS

A single colon (:) used for CSS3 pseudo-classes, double colons (::) for CSS3 pseudo-elements.
A pseudo-element consists of a double colon and a pseudo-element name. Double colons are introduced in the CSS3 specification to differentiate between pseudo-classes and pseudo-elements.
But pseudo-class compatible with existing styles, the browser needs to support the old pseudo-class, such as: First-line,: First-letter,: Before, after and so on.
For pseudo-elements that existed before CSS2, such as: Before, single colon, and double colon: the Before function is the same.
Reminder, if your site only need to be compatible with WebKit, Firefox, Opera and other browsers, it is recommended to use a double colon for the pseudo-element notation
If you have to be compatible with IE, it is safer to use CSS2 's single colon notation.

The difference between a colon and two colons in CSS