JavaScript: any chance or alternative to change CSS Pseudo: before and: after?

Question

At the moment, it seems that I read almost the entire stackoverflow forum to find any solution for modifying pseudo-elements: after and: before.

In my understanding: it cannot be changed, because when the browser displays it, it is not in the DOM. But where then? In browser memory ???

Nevermind, it seems that it is not possible to capture pseudo-elements with: after /: before.

So, I tried differently:

// read CSS value      
var color = window.getComputedStyle(document.querySelector('.myCssClass'), ':before').getPropertyValue('background-color');
// write CSS value
window.getComputedStyle(document.querySelector('.myCssClass'), ':before').setProperty('background-color', "#FF0000");

But ... instead of being happy, the browser returns:

NoModificationAllowedError: Modifications are not allowed for this document

OMG !!! Thus, it seems that there is no workaround for changing these things.

, : CSS, ? , : after/: before? , .

Answer 1

:before :after ( ). document.styleSheets, . ( rules, cssRules ). .

, , :

.foo:before {
    content: "before foo ";
}
.bar:before {
    content: "before bar ";
}

, , HTML:

<div class="foo">there is stuff</div>

:

before foo there is stuff

:

document.querySelector(".foo").className = "bar";

:

before bar there is stuff

Live Example |