Can Multiple :before Pseudo-Elements Be Applied to the Same Element?

Multiple :before Pseudo-Elements for the Same Element

Can multiple :before pseudo-elements be applied to the same HTML element?

Consider the following scenario:

<p>Is it possible to have multiple :before pseudos for the same element?</p>

<pre class="brush:php;toolbar:false">.circle:before {
    content: "CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

I am trying to apply the above styles to the same element using jQuery, but only the most recent one is applied, never both of them.

In CSS2.1, an element can only possess one pseudo-element of each type at any given time. Hence, when multiple :before rules target the same element, they cascade to form a single :before pseudo-element. In the example provided, the result is as follows:

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

The most recently declared content declaration takes precedence, while other declarations are discarded. This behavior is similar to that of regular CSS properties.

To apply multiple pseudo-elements with different content to an element, create additional CSS rules using combined selectors. For example, you could use .circle.now:before or .now.circle:before to target the element and specify the desired content for each pseudo-element.

Legacy CSS specifications proposed a syntax for inserting multiple ::before and ::after pseudo-elements with a CSS2.1-compatible cascade. However, this feature has not been implemented and is unlikely to be included in future specifications.

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