Pseudo element content with JQuery [duplicate]

Question

This question already has answers here:

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

Closed 9 years ago.

I am trying to change the arrow on an :after pseudo element

my css

legend:after {
    content: url('/html/img/arrow-fieldset-up.png');
}

I am trying to change with

$('legend', selected_fieldset).attr('content','url(/html/img/arrow-fieldset-down.png)')

Answer 1

You cannot select the pseudo element with jQuery. Instead you can add a class to your CSS:

legend.selected:after {
    content: url('/html/img/arrow-fieldset-down.png');
}

then add this class when you want to change the content, for example when you click the legend:

$('legend').click(function() {
    $(this).addClass('selected');
})