Search code examples
javascriptjquerycssjquery-selectorspseudo-element

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?

Solution

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

    In HTML:

    <span>foo</span>

    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:

    <span>foo</span>

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