How change content value of pseudo :before element by Javascript

Question

I have the grap constructured by CSS, which is dynamically changes by JS. I show graph max value by pseudo element as:

.graph:before {
    content:\"\"; //va         


        

Answer 1

You can use document.styleSheets to modify pseudo selector cssRules

document.styleSheets[0].cssRules[0].style.content = '"111"';

Answer 2

If you use something like an onoffswitch and want to translate the css content attribute with i18next then you can use one of the i18next Framework example from github (i18next Jquery Framework) and then you extended the function with this code:

var before = i18next.t('onoffswitch.before');
var after = i18next.t('onoffswitch.after');
$('.onoffswitch-inner')
    .attr('data-before', before )
    .attr('data-after', after );

and the css code must be this:

.onoffswitch-inner:before {
    content:  attr(data-before);
    padding-left: 10px;
    background-color: #65AFF5; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content:  attr(data-after);
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}