Pseudo elements

This is the fifth day of my participation in the Novembermore Challenge.The final text challenge in 2021

Do you think this rocket is a picture? It’s just four divs, and the rest are pseudo-element implementations.

What are pseudo elements?

Pseudo-elements — disguised elements that don’t exist on the page — are used to create and style elements that aren’t in the DOM tree.

So we have to distinguish between pseudo-elements and pseudo-classes, right?

Did you create an element outside the document tree?

The CSS3 specification requires the use of double colons (::) for pseudo-elements and one colon (:) for pseudo-elements to distinguish pseudo-classes from pseudo-elements

The use of pseudo-elements

These are the only pseudo-elements: mainly used to set the initial letter of an element, style the first line, and insert content before or after the content of the element

The selector example Case description
::after p::after Insert content after each p element.
::before p::before Insert content before each P element.
::first-letter p::first-letter Select the first letter of each p element.
::first-line p::first-line Select the first row of each p element.
::selection p::selection Select the user-selected part of the element.

::before

The content property must be inserted before the element, otherwise it has no effect. The value is a string, which can be a text or a path.

Example: Add an icon in front of the P tag

<body>
    <div class="main">
        <p>Romantic code farmers</p>
    </div>
</body>
<style>* {padding: 0;
        margin: 0;
    }
    .main{
        width: 300px;
        height: 300px;
        margin: 240px auto;
        border: 1px solid red;
    }
    p::before{
        content: url('./tx.jpg');
        margin-right: 10px;
    }
</style>
Copy the code

Effect:

::after

Insert content after the element the same code as above, we change the pseudo-element to P ::after, and the photo appears after the text. You must use the content property, otherwise it has no effect, and the value is a string, either a text or a path.

Pseudo elements also support positioning, so we can implement pseudo elements to appear anywhere in the parent element.

Effect:

::first-letter

Select the first letter or text of each element. ::first-letter pseudo-elements only apply to block-level elements.

<body>
    <div class="main">
        <h2>Romantic code farmers</h2>
        <p>The 100 - year - old</p>
        <h1>Good morning</h1>
    </div>
</body>
<style>* {padding: 0;
        margin: 0;
    }
    .main{
        width: 300px;
        height: 300px;
        margin: 240px auto;
        border: 1px solid red;
    }
    .main ::first-letter{
        background: rgb(30.160.199);
    }
</style>
Copy the code

Effect:

::first-line

Select the first line of each element.::first-line pseudo-elements can only be applied to block-level elements.

Example:

<body>
    <div class="main">
        <h1>I come from China and I like playing basketball.</h1>
    </div>
</body>
<style>* {padding: 0;
        margin: 0;
    }
    .main{
        width: 300px;
        height: 300px;
        margin: 240px auto;
        border: 1px solid red;
    }
    .main ::first-letter{
        background: red;
        font-size: 2cm;
    }
    .main ::first-line{
        background-color: rgb(39.214.245);
    }
</style>
Copy the code

Effect:

::selection

Select the user-selected part of the element

Example:

<body>
    <div class="main">
        <p>I have also been thoughtful, in every day and night thinking about this problem. Now, it's really, really important to figure out how much hair you lose in a day is the key to everything, right</p>
    </div>
</body>
<style>* {padding: 0;
        margin: 0;
    }
    .main{
        width: 300px;
        height: 300px;
        margin: 240px auto;
        border: 1px solid red;
    }
    .main ::selection{
        background: rgb(0.238.255);
        color: sandybrown;
    }
</style>
Copy the code

Effect:

Write in the last

Pseudo-elements are simple to understand, but they are very widely used, and now we are going to talk about the implementation of the previous rocket.

Let’s start with the simplest rocket. Here’s my sketch. Just the four divs, the cabin of the rocket, the fire, can be implemented using pseudo-elements. Div saves what it can. In fact, in the previous Mid-Autumn Festival activities to write the implementation of the rocket, the code also has. I opened a rocket to send sister Chang ‘e back to the moon

Drivel:

Cute dog in a suit with a knife, so cute.