Many interviewers will ask the difference between 2 colons and 1 colon
Answer directly:
2 colons are pseudo-elements, 1 colon is a pseudo-class
::before and ::after must be used with the content attribute, content must have a value, content is used to define the inserted content
Common pseudo-classes -----:hover,:link,:active,:target,:focus
Common pseudo-elements-------::first-letter,::first-line,::before,::after
What is the role of each?
The unique content under ::before and ::after is used to add content to the logical head or tail of an element in CSS rendering.
These additions will not appear in the DOM, will not change the content of the document, and cannot be copied. They are only added in the css rendering layer.
So don't use :before or :after to display meaningful content, try to use them to display decorative content, such as icons.
https://www.cnblogs.com/ysq2018China/p/10298405.html