CSS introduces the concepts of pseudo-classes and pseudo-elements to format information beyond the document tree. In other words, pseudo-classes and pseudo-elements are used to modify parts that are not in the document tree, such as the first letter in a sentence, or the first element in a list, or when the mouse is hovering over a certain The style to be set when the hyperlink is on.
What are pseudo elements?
Pseudo elements: used to create some elements that are not in the document tree and add styles to them. In fact, pseudo-elements are things that cannot be done by ordinary selectors before or after certain elements. The content of the control is the same as the element, but it itself is an element-based abstraction and does not exist in the document structure. For example, we can use :before to add some text in front of an element and add styles to this text.
Element characteristics
1. Advantages:
(1) Do not occupy DOM nodes and reduce the number of DOM nodes.
(2) Let CSS help solve some JavaScript problems and simplify development.
(3) Avoid adding meaningless page elements.
2. Disadvantages:
(1) Not conducive to debugging.
(2) Pseudo elements are not really reflected in the document content, but are only reflected in the visual effect, so you cannot add practical content to the pseudo elements, and this part of the content will not be crawled by search engines.
CSS provides a series of pseudo-elements, as shown in the following table:
1. ::after
The pseudo element::after can insert some content after the specified element. In ::after, you need to use the content attribute to define the content to be appended, and in ::after, you must define the content attribute to take effect (no content needs to be inserted) The value of the content attribute can be defined as empty).
2. ::before
The pseudo-element::before can insert some content before the specified element. Similar to ::after, the content attribute also needs to be used in ::before to define the content to be appended, and the content attribute must be defined in ::before to take effect (when there is no content to be inserted, the value of the content attribute can be defined as null).
3. ::first-letter
Pseudo element::first-letter is used to set the style of the first character of the content in the specified element. It is usually used with font-size and float attributes to create a drop cap effect. It should be noted that the pseudo-element ::first-letter can only be used for block-level elements. If inline elements want to use this pseudo-element, they need to be converted to block-level elements first.
4. ::first-line
The pseudo element::first-line is used to set the style of the first line of content in the specified element. Similar to ::first-letter, the pseudo element::first-line can only be used for block-level elements. Inline elements want to use this Pseudo-element, you need to convert it to a block-level element first.
5. ::selection
Pseudo element::selection is used to set the style when the object is selected. It should be noted that the pseudo element::selection can only define the color, background, cursor, outline and text-shadow when the element is selected (IE11 does not support it yet Define this attribute) and other attributes.
6. ::placeholder
Pseudo element::placeholder is used to set the placeholder text (text set through the placeholder attribute of HTML) of form elements (<input>, <textarea> elements).