How to select CSS pseudo element using javaScript

Last Updated : 28/06/2021

Using javascript we can easily select HTML elements, also we can change the style of an HTML element using javascript easily but how can we play with CSS pseudo-element? In this post, I will show you how can we select CSS pseudo-element(after, before) using javascript.

select CSS pseudo element using javaScript

CSS after element

//HTML
<div id="box">
   This is box div
</div>

//CSS
#box{
   width:500px;
   height: 500px;
   border:2px solid red;
   margin:0px auto;
   box-sizing:border-box;
   padding: 15px;
   position:relative;
}
#box::after{
   content:'i m after';
   background:green;
   color:#fff;
   width:100px;
   position:absolute;
   top:-20px;
   right:0;
   font-size: var(--boxAfterFontSize,20px);
}

Here, for the font-sise we just used a css variable(boxAfterFontSize). So that we can change the value of the varibale using javascript. Download the complete source code, for better understanding.

How to Get CSS pseudo-element style using javascript

CSS pseudo-element is not like a normal element it is a computed element so to get the style of this you can use the getComputedStyle() method, this method will take two parameters one is the main element and the second one is the pseudo-class.

Note: To access CSS computed style don’t use any hyphen between two words of a CSS property.
element.fontSize // valid
element.font-size // not valid

Getting the CSS property of css pseudo element(after) using javascript

var box      = document.getElementById("box");
var boxAfter = window.getComputedStyle(box, "::after");
console.log(boxAfter.backgroundColor); // getting the background color

Here, we just getting the background color of our box div using javascript. Please download the complete source code, for better understanding.

Change(set) the style of CSS pseudo-element using javascript

Changing or setting the style of CSS pseudo-element is a tricky one, actually, you can not do this directly or maybe I do not know the way yet, but I will share a technique with you to do this.

The technique of Changing the style of CSS pseudo-element

Use CSS variable to design your CSS pseudo-element and change the value of the variable using javascript and this will change the style of your CSS pseudo-element.

Example

 #box::after{
 content: 'this is after';
 background-color: var(--boxAfterBackColor,red);
 position: absolute;
 top: -20px;
 right: 0px;
 font-size: var(--boxAfterFontSize,20px);
}

let box = document.getElementById('box');
box.style.setProperty('--boxAfterBackColor','green');
box.style.setProperty('--boxAfterFontSize','50px');

Here, we changing the value of css after element by changing the variable value using javascript. Please download the complete source code, for better understanding.

Note:
The Window.getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain. The CSSStyleDeclaration.setProperty() method interface sets a new value for a property on a CSS style declaration object.

Download Source Code