Sometimes, we want to select and manipulate CSS pseudo-elements such as ::before and ::after using JavaScript.
In this article, we’ll look at how to select and manipulate CSS pseudo-elements such as ::before and ::after using JavaScript.
How to select and manipulate CSS pseudo-elements such as ::before and ::after using JavaScript?
To select and manipulate CSS pseudo-elements such as ::before and ::after using JavaScript, we can add a stylesheet dynamically.
For instance, we write
const str = "bar";
document.styleSheets[0].addRule("p.special:before", 'content: "' + str + '";');
to add a style rule for the part of the p element with class special.
We set the content property to the str string.
Conclusion
To select and manipulate CSS pseudo-elements such as ::before and ::after using JavaScript, we can add a stylesheet dynamically.
