This is the 7th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Write in front: recently the cold air is coming, everyone pay attention to keep warm, if you have time, also to the family, friends, that you want to see the people you have not seen for a long time to make a warm winter phone call. Don’t wait. Just this time.

November 7, 2021, the start of Winter

preface

This article is suitable for front-end xiaobai, or review CSS partners, because the author is still a front-end xiaobai (😁).

I often see these two things all the time, but I have not understood this thing, light liver Java, now IS to complete the task of the teacher, every day while learning code.

Personal feeling front-end fun or fun, difficult to adjust the style is really difficult to adjust.

Today is also learned this little knowledge, while more text to share with you.

1. Pseudo-element concept

In fact, from the literal meaning of understanding, pseudo word, is false meaning. A pseudo-element is a real but fake element that has content but does not itself exist in the document tree and does not have any HTML tags.

Why do we use pseudo-elements?

After H5, we added a lot of semantic elements, such as nav, hader and footer tags, to make the document tree clearer and to allow for better separation of style and content.

As we all know, many of the labels we write have no clear semantics, just extra elements to achieve a certain style. Many of these styles, which require additional elements to be implemented, happen to make use of pseudo-elements to decorate content (whether it’s to decorate images or sound effects) without changing the content of the HTML, helping to separate content from style.

Adding an extra element to the HTML just to draw a decorative triangle is unnecessary to the actual content and can have a negative impact on automatic parsing of web pages’ semantics.

In short: Pseudo-element selectors can simplify HTML structure by helping you create new tag elements using CSS without the need for HTML tags.

Application scenarios

Just a few of the most common examples. Pull down the box below to select the small corner marker, mask layer, clear float

Like the dropdown in the Element component:

Other small ICONS, some small triangles are also made of pseudo-elements.

A. before B. after C. before D. after

3.1, : : before

The old writing (before).

::before, inserts content before the inside of the element.

In CSS, ::before creates a pseudo-element that will be the first child of the element that matches the selection. The content attribute is often used to add modifiers to an element. This element defaults to an inline element. The Content property is also a mandatory property.

Grammar:

/* CSS3 syntax */
element::beforeStyle of {}/* (single colon) CSS2 obsolete syntax (only used to support IE8) */Element :before {style}/* Insert content */ before each p element
p::before { content: "Hello world!"; } 
Copy the code

3.2, : : after

::after Inserts content after the inside of the element.

CSS pseudo-element :: After is used to create a pseudo-element as the last child of the selected element. Decorative content is usually added to the element in conjunction with the Content attribute. This virtual element defaults to an inline element.

Grammar:

element:after  { style properties }  /* CSS2 syntax */

element::after { style properties }  /* CSS3 syntax */
Copy the code

3.3. Simple Examples

HTML code:

<div class="box1">I am a blogger</div>
Copy the code

The CSS code:

.box1::before{
    content:"Hello, everybody."
}
.box1::after{
    content:"Better in spring"
}
Copy the code

Effect:

If we want to set the width and height of these pseudo-elements, we must write display:inline-block, otherwise it will not take effect.

The following is an example:

After you add it, it’s ok to pull

The relationship between before and box and after is roughly shown below

3.4. Pay attention

  • Before and after create an element, but the resulting element is an inline element.
  • In addition, the newly created element is not found in the document tree
  • There must be before and aftercontentattribute
  • Before creates the element before the parent element content, and after inserts the element after the element content
  • Pseudo-element selectors, like label selectors, have a weight of 1

Five, pseudo-element implementation cases

5.1 Scenario 5: Pseudo-element font icon

Make one like Element makes one like this. But I don’t want to be so complicated, here with a small rocket 🚀 simulation.

HTML code:

<div class="box1">
</div>
Copy the code

The CSS code:

.box1{
    width: 200px;
    height: 35px;
    border: 1px solid #ccc;
}
.box1::after{
    content:"🚀"
}
Copy the code

Our initialized page looks like this:

We’re going to put it there, and the first idea is to locate it.

The parent element of the pseudo-element is the box itself, and then we just need to set the relative positioning of the parent box, and then set the absolute positioning of the pseudo-element.

So we just need to change the CSS style

.box1 {
    width: 200px;
    height: 35px;
    border: 1px solid #ccc;
    position: relative;
}
.box1::after {
    content: "🚀";
    right: 10px;
    position: absolute;
    top: 6px;
}
Copy the code

Effect:

5.2 Photo mask layer

HTML code:

<div class="box1">
    <img src="./123.jpg">
</div>
Copy the code

CSS code

.box1 {
    width: 400px;
    height: 200px;
    position: relative;
}
.box1 img{
    width: 100%;
    height: 100%;
}
.box1::before {
    content:"";
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgb(0.0.0.0.3)}/* The mask layer inside the box is displayed when we mouse over it */
.box1:hover::before{
    /* After ::before show */
    display:block;
}
Copy the code

Effect:

After the language

At present, it is still the front end of the white, I hope you understand, is working hard.

The paper come zhongjue shallow, and must know this to practice.

Hello everyone, I am ning Zaichun: homepage

A young man who likes literature and art but takes the path of programming.

Hope: by the time we meet on another day, we will have achieved something.

Congratulations EDG, we are the champions.