Pankaj
Parashar developer

twitter
email@pankajparashar.com

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!

May 01, 2014 // 2 mins read

Here is the sample markup and styles to start with,

Markup:

<p class="red">Hi, this is a plain-old, sad-looking paragraph tag.</p>

CSS:

.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.

/* CSS */
.green::before {
  content: 'green';
  color: green;
}

// JS
$('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);

// 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.

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

/* JS */
$('.red').attr('data-attr', 'green');

Did you enjoy reading this artice? I'd love to hear your thoughts. Feel free to send me a tweet or open an issue on Github to add your comments.

Next
Reading Position Indicator

Previous
The HeartBleed Bug

2012-2020
Light/Dark

Back to Top