Pseudo-elements can add special effects to certain selectors, generally used to add custom formats
Can be used with css classes
Attributes
:first-letter adds special styling to the first letter of the text (block-level element)
:first-line adds special styles to the first line of text (block-level elements)
:before adds content before the element
:after adds content after the element
【distinguish】
Pseudo-classes (:before) and pseudo-elements (::before)
Single colon (:) is used for CSS3 pseudo-classes, and double colon (::) is used for CSS3 pseudo-elements
The double colon was introduced in the current specification to distinguish pseudo-classes from pseudo-elements. However, browsers need to support the old pseudo-element writing methods, such as :first-line, :first-letter, :before, :after, etc., while the new pseudo-elements introduced in CSS3 are not allowed to support the old ones. Single-colon writing.
For pseudo-elements that existed before CSS2, such as :before, the ::before function of single colon and double colon is the same.
Therefore, if the website only needs to be compatible with browsers such as webkit, firefox, opera, etc., it is recommended to use double colons for pseudo-elements. If it has to be compatible with IE browsers, it is safer to use CSS2 single colons.
【Reminder 】
Pseudo-elements do not appear in the DOM. These elements are not real elements. Therefore, they are not available. So, not using pseudo-elements to generate content is the key to the usability and accessibility of web pages.
Another thing to keep in mind is that development tools, such as Firefox, don't use pseudo-elements to display content. So, if used, pseudo-elements can be difficult to maintain and slow to debug.
【Block level】
The inserted content is not visible in the source code of the page. only visible in css
Also, inserted elements are by default inline elements (or, in HTML5, in the text semantics category). Therefore, in order to give an inserted element height, padding, margins, etc., you usually have to explicitly define it as a block-level element
【usage】
You can set the content property value to be empty and just treat it as a box with little content
but cannot remove the content property
If you remove the pseudo element will not work
【Advantages and disadvantages】
advantage
* Reduce the number of dom nodes
* 让css帮助解决部分js问题，让问题变得简单
缺点
* 不利于SEO
* 无法审查元素，不利于调试