1. Background

We often refer to the box model when learning front-end knowledge. The box model has several elements: margin, border, padding and content. The first three attributes are often used, but how to use the fourth content attribute? That’s what we’re going to talk about today. Content, as the name suggests, is used to generate the content of a web page directly in the CSS. This property is used in combination with the: before and: after pseudo-class properties. Its usage is detailed below.

2. Knowledge analysis

What are ‘before’ and ‘after’?

:before and :after insert an inline element containing the content specified by the content attribute before or after the specified element content (not the element itself). Note that without the Content attribute, pseudo-class elements have no effect. But you can specify that content is empty, and the inserted content is an inline element by default and cannot be seen in the HTML source code, which is why it is called a pseudo-class element and therefore cannot be manipulated through the DOM. Pseudo-class elements also inherit CSS attributes of their parent, such as fonts, just like any other child element.

3. Specific use method of

Insert content can be added directly after content.

<h1> I am big title </h1> h1::after{content:"I'm inserting content"
}
Copy the code

The effect is as follows.

</h3> h3::after{content:url(.. /jsimages/task2-fanpai.png) }Copy the code

Results the following

Insert the serial number

<h5> <h5> <h5> <h5> <h5> <h5> <h5> <h5> <h5> <h5> <h5> <h5> <h5> <h5> <h5> <h5> <h5> <h5> <h5> <h5> <h5> <h5> <h5> } p::after{ content:"neifjdlsfldskfkjldsfk.dsjfjsklfjkl";
}
Copy the code

The effect is as follows:

4. Expand your thinking

4-1. Can elements use content directly?

You can combine after and before after the element.

4-2. Must Content be used with pseudo classes?

Yes, it can only be used with pseudo classes. If you want to add content.

4-3. Is there anything else I can add?

You can add attribute values, text symbols, specific number types, etc.

4-4. Why is the Content attribute rarely used

In my opinion, our front-end code encourages separation of content styles, and the pseudo-class writing of Content confuses this principle.

5. References

The explanation of content in the rookie tutorial

CSS3 content attribute details