They are called pseudo-elements, because they are not real page elements, html does not correspond to the elements, but all usage and performance behavior and real page elements is the same, you can use the same page elements such as css styles ,
on the surface appears to seek some elements of the page seemingly, in fact, show css behavior, so called pseudo-elements,
content pseudo-element added default is inline element that represents the contents of the pseudo-element must set the content property, or do not take effect
class pseudo class selector selecting an object selection is
essentially pseudo-element is inserted a selector element ()
Demo examples:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 296px; height: 180px; margin: 100px auto; position: relative; } div:hover::before { / * Mouse after inserting a dummy element * / Content : "" ; width : 100% ; height : 100% ; border : 10px Solid RGBA (255,255,255, .3) ; the display : Block ; position : Absolute ; Top : 0 ; left : 0 ; Box-Sizing : border-Box ; } </ style > </head> <body> <div> <img src="image/mi.jpg" alt=""> </div> </body> </html>