JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<p>
Normal Content

<button>Change styles</button>
</p>

CSS

body::before {
    content: "Before |";
}
body::after {
    content: "| After";
}

JavaScript

document.querySelector("button").addEventListener("click", function() {
    
    var sheet = document.styleSheets[1];
    
    // Delete the ::before rule -> should fire an event
    sheet.deleteRule(0);
    
    // Delete the ::after rule -> should fire an event
    sheet.deleteRule(0);
   
    // Add a new ::after rule -> should fire an event
    sheet.insertRule("body::after {content: 'would like to know when this happens';}", sheet.cssRules.length);
   
});