Мы не можем получить прямого доступа к этим элементам, так как они не создают узел DOM.

changePseudo.js

Самое простое менять класс контейнера для псевдоэлемента, с предопределенными стилями и конентом
$('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>");

getPseudo.js

var color = window.getComputedStyle(
	document.querySelector('.element'), ':before'
).getPropertyValue('color')