Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

Is there any way to select/manipulate CSS pseudo-elements such as ::before and ::after (and the old version with one semi-colon) using jQuery?

For example, my stylesheet has the following rule:
.span::after{ content:'foo' }


How can I change 'foo' to 'bar' using vanilla JS or jQuery?

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:

In HTML:

foo

In jQuery:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

In CSS:

span:after {
content: attr(data-content) ' any other text you may want';
}


If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:

In HTML:

foo

In jQuery:

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

In CSS:

span.change:after {
content: attr(data-content) ' any other text you may want';
}


Stack Overflow Q#5041494, score: 786