[CSS Pseudo-elements: Before:after] css before, after pseudo-element feature representation interpretation and example

First, the characteristics of one: can not around: empty Pseudo-class

There is a pseudo-class in the CSS3 selector, which means that when there is nothing :empty in the element (including spaces, wrapping in tags), the relevant style is applied. In the modern web page development and production, it is very common and very convenient.

For example, an element class name is .box the following HTML and CSS:

<div class= "box" ></div>

. box {background-color: #cd0000;}. Box:empty {background-color: #fae6e6;}

Because the .box inside is empty big fart, so, the present background color will be like this:

If .box there are spaces, text, or labels:

<div class= "box" > I am text </div>

Then, the :empty failure, then, is the appearance of beautiful red:

Below, the high energy comes, ask, if we use before or after pseudo elements in the .box inside to generate content, pseudo- :empty class still have effect?

The problem is that the :empty pseudo-class is still working, as the toe-tip is going to be ... It's a weird thing! You have a long head on your toes! So the question of learning, we do not take for granted yy, write a simple demo, practice, natural truth!

Dear, please click here:: Empty pseudo-class and Before/after pseudo-elements Demo

The first 3 boxes are to familiarize you with the :empty pseudo-class, our eyes fall directly into the fourth block, the text is generated by pseudo-elements:

. pseudo::after {content: ' pseudo-element generation ';}

As a result, under all modern browsers, the background color of the sissy is still red, as follows:

This performance shows that the content generated inside the empty element using pseudo elements is not :empty recognized by the pseudo-class, and the selector still considers this to be an empty element.

In fact, we have an afterthought ::before , ::after the name in fact betrayed themselves, right, we are usually in the address? "Pseudo-elements" ah, where the large "pseudo" word indicates that the general elements are not the same.

It's not, it :empty 's being squeezed out by pseudo-class.

Second, performance two:content dynamic rendering value can not be obtained

The students familiar with the pseudo-elements should know that content dynamic generation technology can dynamically display a variety of content, including property values, counters and so on, but what you may not know is that we have no way to obtain these final concrete presentation of the content content, why? Because we are flying girl police, I pooh ~ wrong, because we are pseudo-elements.

First of all, in order to avoid ambiguity, I need to explain clearly that we are not unable to get the value of the property in the CSS, but we can not content get content the final rendered content value on the page. What's the difference, for example, everyone should be clear!

You can click here: CSS pseudo-class counter dynamically to get the number of selected elements demo

Above this demo is last year, "CSS Counter + pseudo-class implementation of numerical dynamic calculation and rendering" in the article used in the demo, yes, is the same.

Using a pure CSS dynamic display you currently have selected several items:

The pseudo-element-related CSS is as follows:

. total::after {  content:counter (icecream);}

Very simple CSS, pseudo-elements, content display is the icecream current value of this counter?

The high energy comes again, and if you get the .total number of values that this element is currently presenting (for example, as shown above 3 ), how do you get it?

I'm telling you, you're trying to .total get this dynamic value through this element 3 .

Previously introduced the window.getComputedStyle method, you can obtain a pseudo-element calculation style. However, I'm sorry to get only the purely content property values in the CSS file, for example here:

var dom = Document.queryselector (". Total"), window.getComputedStyle (DOM, ":: After"). Content;   The result is: "Counter (icecream)"

The result is "counter (icecream)", not a numeric value 3 . Why can't we get it? We continue to take an afterthought because it is a "pseudo element", not an element. Haha, this explanation seems to be a little perfunctory, I deliberately to standardize the document to see a circle, did not find a very clear explanation. However, it is said on the internet because it before after does not belong to the normal DOM tree node, so it can't get dynamic rendering content.

[CSS Pseudo-elements: Before:after] css before, after pseudo-element feature representation interpretation and example