Can I have multiple :before pseudo-elements for the same element?
Categories:
Can You Use Multiple :before
Pseudo-elements on a Single Element?

Explore the capabilities and limitations of CSS pseudo-elements, specifically focusing on whether an element can have more than one :before
pseudo-element and alternative approaches.
CSS pseudo-elements like :before
and :after
are powerful tools for adding cosmetic content to an element without modifying the DOM directly. They are often used for icons, clearfixes, or decorative flourishes. A common question that arises when working with these is: can a single HTML element have multiple :before
pseudo-elements? This article delves into the answer, explains why, and provides practical alternatives for achieving similar visual effects.
The Single Pseudo-element Rule
The CSS specification clearly states that an element can only have one :before
and one :after
pseudo-element. This means you cannot directly apply multiple :before
rules to the same element and expect them all to render. When multiple :before
rules are defined for the same element, the last one declared in the stylesheet (or the one with higher specificity) will typically override the others, effectively rendering only one pseudo-element.
flowchart TD A[Element] --> B{Has :before?} B -- Yes --> C[Apply :before rule] C --> D{Another :before rule?} D -- Yes --> E[Override previous :before] D -- No --> F[Render single :before] E --> F
Flowchart illustrating the application of :before
pseudo-elements and the overriding behavior.
/* This will only render 'Second content' */
.my-element::before {
content: 'First content';
color: blue;
}
.my-element::before {
content: 'Second content';
color: red;
}
Demonstration of :before
pseudo-element overriding.
::before
and ::after
pseudo-elements create a child element within the target element, but they are not part of the standard DOM tree. They are generated boxes that can be styled with CSS, but you cannot directly target them with JavaScript or inspect them as regular DOM nodes.Achieving Multiple Visual Effects: Workarounds and Best Practices
While you can't have multiple :before
pseudo-elements, there are several effective strategies to achieve similar visual outcomes. These often involve leveraging other CSS features or structuring your HTML differently.
1. Using Nested Elements
The most straightforward approach is to use nested HTML elements. Each nested element can then have its own :before
and :after
pseudo-elements, allowing for multiple generated content pieces.
<div class="container">
<span class="inner-element">Content</span>
</div>
HTML structure for nested elements.
.container::before {
content: 'Outer before';
color: green;
display: block;
}
.inner-element::before {
content: 'Inner before';
color: purple;
display: block;
}
CSS for nested pseudo-elements.
2. Leveraging box-shadow
and border
For purely decorative effects like multiple borders or layered backgrounds, CSS properties such as box-shadow
and border
can often provide a solution without needing extra HTML or pseudo-elements. box-shadow
in particular can accept multiple comma-separated values, creating layered shadows that mimic multiple :before
effects.
.my-element {
width: 100px;
height: 50px;
background-color: lightblue;
box-shadow:
0 0 0 5px red, /* First 'border' */
0 0 0 10px blue; /* Second 'border' */
}
Using box-shadow
to create multiple layered effects.
3. Utilizing background-image
with Multiple Layers
If your :before
content is primarily an image or a gradient, you can use the background-image
property, which supports multiple comma-separated background layers. This allows for complex visual compositions.
.my-element {
width: 150px;
height: 75px;
background-color: #eee;
background-image:
url('icon-star.svg'), /* First 'before' image */
linear-gradient(to right, yellow, orange); /* Second 'before' effect */
background-repeat: no-repeat;
background-position: top left, bottom right;
background-size: 20px, 50% 50%;
}
Combining multiple background images and gradients.
background-image
layers, the order matters. The first image listed is on top, and subsequent images are layered underneath.