JAVASCRIPT

js dom after selectors

//set an attribute and get it in js and set value
p:before {
    content: attr(data-before);
    color: red;
    cursor: pointer;
}

$('p').on('click', function () {
    $(this).attr('data-before','bar');
});
// or

//Add/remove a predetermined class

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


//or 

var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');

//read ::after,::before

var str = window.getComputedStyle(document.querySelector('p'), ':before') 
           .getPropertyValue('content');

js dom after selectors

var str = "bar";

document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');

$('p').on('click', function () {
    $(this).attr('data-before', str);
});