To be clear:
single colon (:) is used for CSS3 pseudo-classes, double colon (::) is used for CSS3 pseudo-elements.
The pseudo-element consists of a double colon and the pseudo-element name. The double colon was introduced in the css3 specification to distinguish between pseudo-classes and pseudo-elements. But pseudo-classes are compatible with existing styles, and browsers need to support old pseudo-classes at the same time, such as: first-line, :first-letter, :before, :after, etc.
For pseudo-elements that existed before CSS2, such as: before, the writing of single colon and double colon ::before has the same effect.
Reminder, if your website only needs to be compatible with webkit, firefox, opera and other browsers, it is recommended to use double colon notation for pseudo elements. If you have to be compatible with IE browser, it is safer to use CSS2 single colon notation.
: Single colon is the correct and normal writing of CSS2
:: Double colon is the new CSS3 writing and compatible writing. The
compatible writing is to parse different elements
for different browsers. For example,
if you use a single colon: AAA ----> under IE browser Normally, if you use a browser like Google or Firefox, the page will be misplaced, etc.
If you are using double colons for compatibility processing::AAA —> Different browsers will automatically distinguish and parse.
The single colon is used to write pseudo-classes, and the double colon is used to write pseudo-elements. For the pseudo-class to be compatible with the old style, both :after and ::after have the same function.
The difference between pseudo-classes and pseudo-elements: pseudo-elements are virtual elements and have functions similar to the dom structure, and pseudo-classes are virtual class names and have functions such as selectors.
伪类有 :link :hover :active :visited :focus :first-child。
伪元素有 ::before ::after。