Categories
React Answers

How to add CSS pseudo elements in React?

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.