First, the CSS pseudo-elements are used to add special effects to certain selectors. We are in the production of Web pages, some special animation effects are inseparable from the CSS pseudo-elements. Of course, there are many CSS pseudo-elements, the pseudo-element control of the content and an element control the same content, but the pseudo-element is not present in the document tree, not the real element, so called pseudo-elements. Let's go through the specific code examples to give you a detailed introduction to CSS: Before and: The use of the after pseudo-class.
A section with: Before pseudo-element style HTML code is as follows:
<! DOCTYPE html>
Then the above code effect is as follows:
2. A section with: after pseudo-element style HTML code is as follows:<! DOCTYPE html>
Code effects such as:
So do we get some conclusions about how CSS before and after pseudo-classes are used in the examples above, 1 and 2? In fact, as before and after the Chinese translation of the same, in ... Before and in ... After.
In CSS, the before pseudo-element is used to insert new content before the contents of the element, as in Example 1, we use: The Before element adds a picture to the front of the H1 title.
And: The use of the after pseudo-element is to insert new content after the element's content, as in Example 2, we used the following element to add a picture to H1 after the headline.
In fact, before and after pseudo-elements can also be said to be true elements, although pseudo-elements cannot be reflected in the document tree, but we can still give them any style, and the added style can be the same as the normal page elements!
Then this article about Css:before and: After the pseudo-elements of the introduction to here, I hope to be helpful to everyone. More CSS knowledge to watch "CSS video tutorials" or "CSS manuals"