Manipulating :before and :after content via JavaScript

When someone asks how they can use JavaScript to change the content of :before and :after CSS pseudo-classes, the usual answer is, “You can’t.” Since those CSS pseudo-classes aren’t part of the DOM, you can’t use DOM methods to manipulate them.

Unsurprisingly, the real answer is a bit more complex. Here’s a rundown of all the available techniques, with their pros and cons.


I’m going to start with what’s widely considered the “best” approach:

1) 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 (or vanilla JavaScript):

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

http://jsfiddle.net/mblase75/fa5Wn/

  • Pros: Easy to implement with jQuery; quickly alters multiple styles at once; enforces separation of concerns (isolating your CSS and JS from your HTML)
  • Cons: CSS must be pre-written, so the content of :before or :after isn’t completely dynamic

2) Add new styles directly to the document’s stylesheet

It’s possible to use JavaScript to add styles directly to the document stylesheet, including :after and :before styles. jQuery doesn’t provide a convenient shortcut, but fortunately the JS isn’t that complicated:

var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');

http://jsfiddle.net/mblase75/n8tVX/

.addRule() and the related .insertRule() methods are fairly well-supported today.

As a variation, you can also use jQuery to add an entirely new stylesheet to the document, but the necessary code isn’t any cleaner:

var str = "bar";
$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');

http://jsfiddle.net/mblase75/3qc4k/

If we’re talking about “manipulating” the values, not just adding to them, we can also read the existing :after or :before styles using a different approach:

var str = window.getComputedStyle(document.querySelector('p'), ':before') 
           .getPropertyValue('content');

http://jsfiddle.net/mblase75/nHCM6/

We can replace document.querySelector('p') with $('p')[0] when using jQuery, for slightly shorter code.

  • Pros: any string can be dynamically inserted into the style
  • Cons: original styles aren’t altered, just overridden; repeated (ab)use can make the DOM grow arbitrarily large

3) Alter a different DOM attribute

Most browsers allow you to use attr() in your CSS to read a particular DOM attribute. By combining this with content: in some carefully-prepared CSS, we can change the content (but not other properties, like margin or color) of :before and :after dynamically:

p:before {
    content: attr(data-before);
    color: red;
    cursor: pointer;
}

JS:

$('p').on('click', function () {
    $(this).attr('data-before','bar');
});

http://jsfiddle.net/mblase75/Tfc9j/

This can be combined with the second technique if the CSS can’t be prepared ahead of time:

var str = "bar";

document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');

$('p').on('click', function () {
    $(this).attr('data-before', str);
});

http://jsfiddle.net/mblase75/Lfba2/

  • Pros: Doesn’t create endless extra styles
  • Cons: attr in CSS only reads strings, not URLs or RGB colors

Leave a Reply

Your email address will not be published. Required fields are marked *

*