The difference between css pseudo-classes and pseudo-elements

CSS introduces pseudo-classes and pseudo-elements to format information outside the document tree , that is, pseudo-classes and pseudo-elements are used to modify parts that are not in the document tree, such as the first letter of a sentence, the first letter in a list an element.
**Pseudo-classes are used to add corresponding styles to existing elements when they are in a certain state. ** This state is dynamically changed according to user behavior. For example: when the user's mouse stops on the element specified by Mogg, we can use hover to describe the state of this element. Although it is similar to ordinary CSS classes, it can add styles to existing elements, but it is only in the dom tree Styles can only be added to elements in an indescribable state, so they are called pseudo-classes.
**Pseudo-elements are used to create and style elements that are not in the document tree. **For example, we can use :before to add some text before an element and add styles to the text. Although the user can see the text, the text is not actually in the document tree.
Pseudo-classes operate on elements already in the document tree, while pseudo-elements create an element outside the document tree. Therefore, the difference between pseudo-classes and pseudo-elements is: there is no element created outside the document tree.