JSFiddle - React, Tailwind, and code Playground

HTML

<span class="one"></span>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

.one::before {
    content: "5";
}
ul > li {
     color: green;
}
ul > li::before {
    content: "8";
}

JavaScript

for(var i = 0; i < document.styleSheets.length; i++){
    var fRemove = [];
    for(var j = 0; j < document.styleSheets[i].cssRules.length; j++){ 
        var rul = document.styleSheets[i].cssRules[j];
        if(/::before/.test(rul.selectorText)){
            var elem = $(rul.selectorText.replace(/::before/im,''));
            elem.prepend('<span style="'+rul.style.cssText+'">'+((rul.style.content) ? rul.style.content.replace(/\'?\"?/ig,'') : '')+'</span>');
            fRemove.push(j);
        }
        if(/::after/.test(rul.selectorText)){
            var elem = $(rul.selectorText.replace(/::after/im,''));
            elem.append('<span style="'+rul.style.cssText+'">'+((rul.style.content) ? rul.style.content.replace(/\'?\"?/ig,'') : '')+'</span>');
            fRemove.push(j);
        }
    }
    for(var j = 0; j < fRemove.length; j++)
        document.styleSheets[i].deleteRule(fRemove[j]-j);
}