jQuery and hiding :after / :before pseudo classes [duplicate]

Question

Possible Duplicate:
jQuery and pseudo-classes

I tried hiding the :after pseudo class via jQuery in a number of ways but with no success, I've found another solution by adding a sort of empty div under my div that contains the :after content and then hiding the div entirely so it gives the same effect.

However I was just curious if anyone had managed to find a way to hide the :after or :before stuff. Here is what I tried that didn't work.

$('.search_box:after').hide();
$('.search_box:after').css('display', 'none');

Just to give you the context, I have a div that contains the search form etc, and when the search is active I want to enable a little arrow indicator under the div pointing like to the list of found items (built with :after via CSS) and when nothing is found, or it defaults to the full out list (since nothing was found) then I want to hide it.

Answer 1

You cannot do this. Your best bet is to use a class on the element to toggle the display of the pseudo element.

<style>
    .search_box:after {
        content: 'foo';
    }
    .search_box.hidden:after {
        display: none;
    }
</style>
<script>
    //Instead of these 2 lines
    //$('.search_box:after').hide();
    //$('.search_box:after').css('display', 'none');

    //Use
    $('.search_box').addClass('hidden');
</script>

Live example - http://jsfiddle.net/4nbnh/