Designer. Developer. Writer.

Hi. there..

I'm Pankaj Parashar, 26yo developer, designer and writer from India. I make things for the web and write about them on my blog here.

 • 

Modify pseudo element styles with JavaScript

Quite often I run into situations where I need to modify the CSS styles of the pseudo elements dynamically. This post shows you different ways in which it can be done!

Sample markup and styles to start with,

<p class="red">Hi, this is a plain-old, sad-looking paragraph tag.</p>
.red::before {
    content: 'red';
    color: red;
}

Objective -
To modify the color of the pseudo element - .red::before from red to green.

Method 1
Write separate classes attached with psuedo element for each style and then using JavaScript or jQuery toggle between these classes.

.green::before {
    content: 'green';
    color: green;
}
$('p').removeClass('red').addClass('green');

Method 2
Inject new styles to the existing document stylesheet directly either via JavaScript and the webpage will automatically reflect the new css.

document.styleSheets[0].addRule('.red::before','color: green');
document.styleSheets[0].insertRule('.red::before { color: green }', 0);

Method 3
Create a new stylesheet and inject the modified rules to the newly created document stylesheet either via JavaScript or jQuery.

// Create a new style tag
var style = document.createElement("style");

// Append the style tag to head
document.head.appendChild(style);

// Grab the stylesheet object
sheet = style.sheet

// Use addRule or insertRule to inject styles
sheet.addRule('.red::before','color: green');
sheet.insertRule('.red::before { color: green }', 0);

or jQuery …

$('<style>.red::before{color:green}</style>').appendTo('head');

Method 4
At times you need the fetch the value of the property from the existing ruleset and then make the modifications based on some logic.

var str = window.getComputedStyle($('.red'), '::before').getPropertyValue('content');
document.styleSheets[0].addRule('.red::before','content: "' + str + str + '"');
document.styleSheets[0].insertRule('.red::before { content: "' + str + str + '" }', 0);

Method 5
We can alter a different DOM attribute of the element by combining it with the content property, we can change the content (but not other properties, like margin or color) of pseudo elements dynamically.

<p class="red" data-attr="red">Hi, this is plain-old, sad-looking paragraph tag.</p>
.red::before {
    content: attr(data-attr);
    color: red;
}
$('.red').attr('data-attr', 'green');

Did you enjoy reading this article? I'd love to hear your thoughts. Shoot me an email or send me a tweet if you've got any comments.

‹ Back to Home