“This is the 14th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

“False elements,” as the name suggests. It creates a fake element and inserts it before or after the target element content.

Browsers support :before and :after pseudo-element stacks

A lot of people like to just write one colon, but I saw that the specification said it was best to use two colons, and of course one colon is valid

You can see that pseudo-elements are inserted before and after this content

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        #test {
            width: 100px;
            height: 100px;
            background: aqua;
        }
        #test::after{
            content: '? '
        }
        #test::before{
            content: '! '
        }
    </style>
</head>
<body>
    <div id='test'></div>
</body>
</html>
Copy the code

Pseudo-elements are useless if the “content” attribute is not set.

The inserted content is not visible in the page’s source code. Only visible in CSS, so not using fake elements to generate content is key to the usability and accessibility of your web pages.

Inserted elements are inline by default (or, in HTML5, in the category of text semantics). Therefore, in order to give the inserted element height, padding, margins, and so on, you usually have to explicitly define it as a block-level element.

Pseudo-elements do not inherit

You can include a URL that points to an image, just as you can include a background image in CSS. The CONTENT URL should not be quoted or it will be considered a string

#test::before{
    content: url(./4.png)}Copy the code

Read the official explanation for a false element error. When I was using img, I wanted to use fake elements, and found that they all worked. Please see the official explanation below. So don’t use fake elements in the IMG tag

As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element’s document tree content.The ‘content’ property, in conjunction with these pseudo-elements, specifies what is inserted.

As the name implies, :before and :after pseudo-elements specify the content positions before and after the content of the element’s document tree. The ‘content’ attribute, along with these pseudo-elements, specifies what to insert.

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification. The specification does not fully define the interaction of :before and :after with replacement elements such as IMG in HTML. This will be defined in more detail in a future specification.