Learn CSS pseudo-class elements with an example_html/css_WEB-ITnose

CSS pseudo-class elements are a very cool thing! First, let’s understand it, :before :after pseudo-class elements, which are false elements. It can be inserted in front or behind the element, but in the HTML document structure, it does not exist because Js cannot control it through the DOM. And its usage is also very simple, just like some pseudo-classes, such as: a:hover, a:active. Then the pseudo elements here are a:before, a:after.

Regarding pseudo elements, the most important attribute is the content attribute. If the pseudo element in CSS does not have the content attribute, then this pseudo element will have no effect . But we can pass it a null value to indicate that this pseudo element has nothing. content: "", then let's first intuitively feel the effect of pseudo elements.

It is very obvious that we cannot see these pseudo elements in developer mode, but they are indeed rendered! In this way, we can use such pseudo elements to do something very flexibly without affecting the HTML structure. We can also know from this that the elements generated by these pseudo-elements are all inline elements . If necessary, we can manually turn them into block-level elements.

Of course, content is not limited to incoming text, images url(img.jpg) . The most powerful thing is that the attributes of the element can be passed in as parameters, such as attr(href), which means that the href value of the element is used as the content of the pseudo element in the form of text.

The key point is of course hands-on. Here is how we use CSS pseudo-elements to make a very cool thing.

This is our example, using CSS pseudo-elements to draw a Tai Chi. At first glance, does it seem incredible? It's actually very simple, let's continue looking.

First of all, the black part of this div is realized through border-bottom. Let the sum of border-bottom and height be equal to width, and then use border-radius to make it easy. Achieve a black and white color above and below a circle. Then there is a relative here, which is to limit the absoluteness of the following pseudo elements. Looking at it this way, is it a bit confusing? Then let's continue watching.

Next we use our pseudo elements. We make the content of the pseudo element empty, and then use the combination of height, width, border and border-radius to achieve the effect of concentric circles, and selectively cover it with different colors and absolute and left and top values. Of course, the same method is used on the other side, and naturally a very cool Bagua picture comes out.

It’s important to get started, try it if you think it’s cool!

Finally, one more thing, we can make a lot of things through CSS CSS3, boldly use your imagination, and always remember one thing: "Do it more!"