Shulou(Shulou.com)06/01 Report--

This article mainly introduces the knowledge of "how to use the before pseudo-elements of css". The editor shows you the operation process through an actual case. The operation method is simple and fast, and it is practical. I hope this article "how to use the before pseudo-elements of css" can help you solve the problem.

A piece of HTML code with: before pseudo-element style is as follows:

H2:before {content:url (/ test/img/2.png)}

Here is a big title.

Cssbefore pseudo-element usage code example

Then the effect of the above code is as follows:

9f30a43ddc65f461d9efe3e6cff142e.png

two。 A piece of HTML code with: after pseudo-element style is as follows:

H2:after {content:url (/ test/img/2.png)}

Here is a big title.

Css:after pseudo-element usage code example

The effect of the code is as follows:

0a99bd3f5e962d9ef13fdb82cd5a2e6.png

So do we draw any conclusions about the use of cssbefore and after pseudo-classes from the examples 1 and 2 above? In fact, just as the Chinese translation of before and after is similar, in. Before and before. After that.

In css, the use of the: before pseudo element is to insert new content before the content of the element, as in example 1, we use the: before element to add a picture to the front of the H2 headline.

The use of the after pseudo element is to insert new content after the content of the element, as in example 2, we use the: after element to add a picture to the back of the H2 headline.

In fact, before and after pseudo-elements can also be said to be real elements, although pseudo-elements can not be reflected in the document tree, but we can still add any style to them, and the style can be the same as ordinary page elements!

This is the end of the content about "how to use the before pseudo-elements of css". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.