Can You Have Multiple :before Pseudo-Elements on One Element?

Multiple :before Pseudo-Elements

Can an element possess multiple :before pseudo-elements? This question arises when applying styles to the same element using jQuery, where only the latest style seems to take effect.

CSS2.1 Limitations

In CSS2.1, an element can only have one pseudo-element of a specific type at any given time. Thus, an element can have both :before and :after pseudo-elements, but not more than one of each.

Cascade Behavior

Multiple :before rules for the same element are cascaded and applied to a single :before pseudo-element. The rule with the highest precedence, typically the last one, prevails. In the provided example:

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

Only the content declaration in the last rule, "Now", will be applied. The remaining declarations are discarded, similar to normal element properties.

Combining Selectors

If multiple selectors match the same element and you desire to apply all their styles, generate additional CSS rules with combined selectors. For the given example, this would be .circle.now:before or .now.circle:before.

Legacy CSS3-Content Specification

The deprecated css3-content specification suggests a notation to insert multiple ::before and ::after pseudo-elements compatible with CSS2.1 cascade. However, this feature is obsolete and has not been implemented by any browser.

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