Before of CSS, after pseudo-element characteristics performance Two

First, the performance of one: not about: Empty pseudo class

There is a pseudo class in the CSS3 selector, which means that the :empty associated style is applied when there is nothing inside the element (including spaces, wrapping in the label). In the modern web page development production, very often also 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 background color that renders will be the following:

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

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

Then, the :empty expiration, thus, presents the beautiful red:

Below, high-energy come, excuse me, if we use before or after pseudo element to .box generate content inside, :empty pseudo class still have function?

The problem is to move the toes and think about :empty it. The pseudo class is still at work ... ..... It's just weird! You have a long head on your toes! So the problem of learning, I do not take for granted yy, write a simple demo, practice, the nature of the truth!

Good, please ruthlessly click here:: Empty pseudo-class and Before/after pseudo element demo

The front 3 frame is lets you acquaint with the :empty pseudo class, our gaze directly falls to the fourth square, inside the text is the pseudo element generation:

. pseudo::after {content: "pseudo-element generation contents";}

As a result, all the modern browsers below, still is the Niang red background color, screenshot as follows:

This performance shows that the content generated by the use of pseudo elements inside an empty element is not recognized by the :empty Pseudo class, and the selector still considers this an empty element.

In fact, we have an afterthought, the ::before ::after name in fact betrayed their own, right, we are usually in what is called? "Pseudo element" Ah, where the big "pseudo" word is not the same as the general element.

It's not, it's being :empty squeezed out of the pseudo class.

Ii. performance two:content Dynamic rendering value not available

Familiar with the pseudo elements of the students should know that content dynamic generation technology can dynamically display a variety of content, including property values, counters, etc., but, you may not know that we do not have the means to obtain these final concrete presentation of content content, why? Because we are flying daughter police, I pooh ~ wrong, because we are pseudo element.

First of all, in order to avoid ambiguity, I need to explain that we are not unable to get the attribute values in CSS, but we can not content get the content final rendering on the page content values. What is the difference, for example, we should be clear!

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

The above demo is the last year, "CSS Counter + pseudo-class implementation of numerical dynamic computing and rendering," a demo used in the article, is the same.

Use pure CSS to dynamically display a few items that you currently select:

Pseudo element related CSS is as follows:

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

Very simple CSS, pseudo element, the content shows the icecream current value of this counter?

High energy comes again, how do you get it if you get the number of values that the .total element is currently presenting (for example, the screenshot above 3 )?

Tell you, you try to .total get this dynamic value through this element is 3 difficult to the sky!

Previously introduced the window.getComputedStyle method, you can get the calculation style of pseudo elements. But, I'm sorry, I got just pure content property values in CSS files, like here:

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

The result is "counter (icecream)" Instead of a numeric value 3 . Why can't I get it? Let's continue with our hindsight because it's "pseudo element", not an element. Haha, this explanation seems a bit perfunctory, I deliberately went to standardize the document to see a circle, did not find a very clear explanation. But there is a saying on the internet because, because it is before after not part of the normal DOM tree node, it is impossible to get dynamic rendering content.