Can You Apply Multiple :before Pseudo-Elements to a Single Element?

Can Multiple :before Pseudo-Elements Enhance the Same Element?

Introduction:
While utilizing CSS, a common question arises: can multiple :before pseudo-elements be applied to a single element? To understand the answer, let's delve into the concept of pseudo-elements and explore how they interact with the cascade.

CSS Pseudo-Elements and the Cascade:
In CSS2.1, an element can possess only one pseudo-element of a specific type at a time, such as :before or :after. This means an element can have both, but not multiple instances of the same type.

Example Using jQuery:
As exemplified in the given code, attempting to apply multiple :before pseudo-elements to one element using jQuery results in only the last one taking effect:

.circle:before {
    content: "CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

Cascading Behavior:
When multiple :before rules apply to the same element, they follow the cascading rules, where the rule with higher precedence (the last one) overrides the others. This results in a single :before pseudo-element with the declarations from only the last rule, as in the following:

.circle.now:before {
    content: "Now";
    font-size: 19px;
    color: black;
}

Overcoming the Limitation:
If multiple :before declarations are desired for the same element, one needs to create additional CSS rules with combined selectors. This allows specifying the desired behavior for different combinations of classes:

.circle.now:before { /* Specific rule for .circle with .now */ }
.now.circle:before { /* Specific rule for .now with .circle */ }

Legacy CSS and Future Developments:
The deprecated css3-content specification proposed inserting multiple pseudo-elements using a notation compatible with the CSS2.1 cascade. However, this feature was never implemented. Currently, the css-content-3 and css-pseudo-4 drafts omit this feature due to lack of interest.

The above is the detailed content of Can You Apply Multiple :before Pseudo-Elements to a Single Element?. For more information, please follow other related articles on the PHP Chinese website!