PROBLEM :

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, the stylesheet has the following rule:

.span::after{ content:'foo' }

How to change ‘foo’ to ‘bar’ using jQuery?

SOLUTION 1:

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

 HTML:

<span>foo</span>

 jQuery:

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

 CSS:

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

To prevent the ‘other text’ from showing up, we could combine this like this:

HTML:

<span>foo</span>

 jQuery:

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

 CSS:

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

SOLUTION 2:

Add/remove a predetermined class :

In this approach, you’ve already created a class in your CSS with a different :after or :before style. Place this “new” class later in your stylesheet to make sure it overrides:

p:before {
    content: "foo";
}
p.special:before {
    content: "bar";
}
Then you can easily add or remove this class using jQuery :

$('p').on('click', function() {
    $(this).toggleClass('special');
});

SOLUTION 3:

You can’t select pseudo elements in jQuery because they are not part of DOM.
But you can add an specific class to the father element and control its pseudo elements in CSS.

 jQuery:

<script type="text/javascript">
    $('span').addClass('change');
</script>

 CSS:

span.change:after { content: 'bar' }

SOLUTION 4:

you could also do:

$('head').append("<style>.span::after{ content:'bar' }</style>");

SOLUTION 5:

Here is the way to access :after and :before style properties, defined in css:

// Get the color value of .element:before
var color = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('color');

// Get the content value of .element:before
var content = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('content');

SOLUTION 6:

• IF you want to manipulate the ::before or ::after pseudo elements entirely through CSS, you could do it using JavaScript as shown below.

jQuery('head').append('<style id="mystyle" type="text/css"> /* your styles here */ </style>');

• Notice how the <style> element has an ID, which you can use to remove it and append to it again if your style changes dynamically.
• This way, your element has its style exactly how you want it through CSS, with the help of JS.

SOLUTION 7:

• Add a rule to the document with the new content and reference it with a class. depending on what is needed .the class might need an unique id for each value in content.

$("<style type='text/css'>span.id-after:after{content:bar;}</style>").appendTo($("head"));
$('span').addClass('id-after');

SOLUTION 8:

• Why adding classes or attributes when you can just append a style to head

$('head').append('<style>.span:after{ content:'changed 			content' }</style>')

SOLUTION 9:

• Write separate classes attached with psuedo element for each style and then using JavaScript or jQuery toggle between these classes as shown below.

.green::before {
    content: 'green';
    color: green;
}
$('p').removeClass('red').addClass('green');

SOLUTION 10:

• Inject new styles to the existing document stylesheet directly either via JavaScript and the webpage will automatically reflect the new css.

document.styleSheets[0].addRule('.red::before','color: green');
document.styleSheets[0].insertRule('.red::before { color: green }', 0);