Pseudo element content with JQuery

Question

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)')

Pseudo elements aren't part of the DOM, so they can't be selected. There are some good workarounds here: **[Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)](http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after)** — gtr1971, Mar 20 '14 at 14:24

score 2 · Accepted Answer · answered Mar 20 '14 at 14:19

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');
})

1 Answers1