Use the CSS pseudo-elements ::before and ::after to insert content before and after the document without changing the original structure of the document. In combination with box-shadow, you can achieve very dazzling effects.
Show three examples:
main feature
- Pseudo elements do not belong to the document, so js cannot manipulate it
- The pseudo-element is part of the main element, and clicking on the pseudo-element triggers the click event.