Мы не можем получить прямого доступа к этим элементам, так как они не создают узел DOM.
var color = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('color')
Самое простое менять класс контейнера для псевдоэлемента, с предопределенными стилями и конентом
$('p').on('click', function() {
$(this).toggleClass('special');
});
// Чтобы их динамично менять,
// можно только получить доступ к их контейнеру с его свойством content,
// которое должно быть предопределено в том же CSS.
// А потом мы просто задаем соответстующий атрибут элементу
/* p:before {
content: attr(data-before);
color: red;
cursor: pointer;
} */
// JS:
$('p').on('click', function () {
$(this).attr('data-before','bar');
});
// Только стили псевдоэлемента так менять не получится.
// ТОгда мы можем генерировать правила для css.
var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');
// или вообще так
$('head').append("<style>.span::after{ content:'bar' }</style>");