JSFiddle - React, Tailwind, and code Playground

by bodine30

HTML

<p>Some textContent</p>

CSS

p {font-size:30px;}

JavaScript

var stylesheet = document.styleSheets[document.styleSheets.length-1],counter=0;
stylesheet.insertRule('p::after {content:" after"; color:red;}',stylesheet.cssRules.length);
stylesheet.insertRule('p::before {content:"before "; color:lime;}',stylesheet.cssRules.length);

document.getElementsByTagName("p")[0].addEventListener("click",function(e) {
    var str = (++counter) + " x " + e.type;    
    stylesheet.insertRule('p::after {content:" '+str+'"; color:red;}',stylesheet.cssRules.length);
    console.log(stylesheet.cssRules[stylesheet.cssRules.length-1].cssText);
    console.log(document.getElementsByTagName("style")[document.getElementsByTagName("style").length-1].innerHTML);
});