Sometimes, we want to add CSS pseudo elements in React.
In this article, we’ll look at how to add CSS pseudo elements in React.
How to add CSS pseudo elements in React?
To add CSS pseudo elements in React, we add real elements.
For instance, we write
<div>
<span>Something</span>
<div
style={{ position: "absolute", WebkitFilter: "blur(10px) saturate(2)" }}
/>
</div>
in our React component, which is equivalent to
<div class="something"><span>Something</span></div>
<style>
.something::after {
content: "";
position: absolute;
-webkit-filter: blur(10px) saturate(2);
}
</style>
in regular HTML and CSS.
.something::after selects the div after the span in the React component.
-webkit-filter is replaced with WebkitFilter in React.
Conclusion
To add CSS pseudo elements in React, we add real elements.
