JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tryme">this should stay here</div>
<a href="javascript: resetPsuedo(document.getElementById('tryme'));">remove pseudo elements from this guy too</a>
<br /><br /><br />

CSS

div{ border: 10px solid red; width: 3; font: 50px/1em sans-serif;}
div:before,
div:after{ color: red; content: "some more content"; }

JavaScript

$(function() {
    var d = document.createElement('div');
    d.innerHTML = "hello, world!";
    d.setAttribute('style', "font: 100px/1em sans-serif;");
    
    document.body.appendChild(d);
    
    alert("current height: " + d.clientHeight);
    alert("writing new css");
    
    resetPsuedo(d);
    
    alert("current height: " + d.clientHeight);
});

function resetPsuedo(el) {
    if (!el.id) el.id = makeId();
    var selector = "#" + el.id;
    
    var head = document.getElementsByTagName('head')[0],
    style = document.createElement('style'),
    rules = document.createTextNode(selector + ":before, " + selector + ":after { content: '' }");

    style.type = 'text/css';
    if(style.styleSheet)
        style.styleSheet.cssText = rules.nodeValue;
    else style.appendChild(rules);
    head.appendChild(style);
}

function makeId() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

    for (var i=0; i < 15; i++)
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}