How to Update Properties of Pseudo Element :after and :before using Javascript ?

Last Updated : 06 Jun, 2023

In this article, we will learn how to select and update the CSS properties of pseudo-elements ::after and ::before using JavaScript. The HTML elements like <div>, <h1>, <p>, etc. can be easily selected using document.getElementById() and other related JavaScript methods, selecting pseudo-elements using JavaScript requires a slightly different approach.

To select and update the CSS properties of pseudo-elements, we can use the document.styleSheets[i].cssRules property. This method returns an object of the CSS style rules that include all CSS rules of the ith stylesheet. We can select any CSS style rule and can update the rules.

Syntax:

let obj = document.styleSheets[0].cssRules;

document.styleSheets[0] method will return the first stylesheet attached to the document. document.styleSheets[0].cssRules will return an array-like object that includes all the CSS rules related to all the elements of the document.

Example 1: In the below example, we have created an HTML document and apply styles to the elements of this document. We have created a div and a pseudo-element ::after for this div. A button is also created that will update the CSS properties of this div pseudo-element.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <style> 
        #box { 
            width: max-content; 
            height: auto; 
            background-color: green; 
            padding: 40px; 
            color: white; 
            font-size: 20px; 
            font-weight: 200; 
            position: relative; 
        } 
  
        #box::after { 
            position: absolute; 
            content: '::after peseudo element'; 
            top: 0; 
            left: 100%; 
            padding: 40px; 
            color: white; 
            width: max-content; 
            height: auto; 
            background-color: orangered; 
            font-size: 20px; 
            font-weight: 200; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color: green;"> 
        GeeksforGeeks 
    </h2> 
      
    <h3> 
        How to update the CSS properties  
        of pseudo element ::after and  
        ::before using javascript 
    </h3> 
  
    <div id="box"> 
        Hello Geek! 
    </div> 
    <br> 
  
    <button onclick="changeColorPseudoEle()"> 
        ChangeContent_of_::after_element 
    </button> 
  
    <script> 
        const changeColorPseudoEle = () => { 
  
            // Selecting the "#box::after" CSS 
            // rule from rule list 
            let st = document.styleSheets[0].cssRules[1]; 
  
            // Change the styles of the selected  
            // pseudo element 
            st.style.content = '"Content Changed!"'; 
        } 
    </script> 
</body> 
  
</html>

Output:

In the above code document.styleSheets[0].cssRules[1] will select the first index CSS rule from the 0-th stylesheet. The first index CSS style rule is “#box::after”. After selecting the “#box::after” CSS style rule the CSSrule.style.content property will change the content of the “#box::after” CSS style rule.

Example 2: In the below example, we have added one more pseudo-element ::before and used javascript methods to change the color of both pseudo-elements ::after and ::before.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <style> 
        #box { 
            width: max-content; 
            height: auto; 
            background-color: green; 
            padding: 40px; 
            color: white; 
            font-size: 20px; 
            font-weight: 200; 
            position: relative; 
            margin-left: 300px; 
        } 
  
        #box::after { 
            position: absolute; 
            content: '::after peseudo element'; 
            top: 0; 
            left: 100%; 
            padding: 40px; 
            color: white; 
            width: max-content; 
            height: auto; 
            background-color: orangered; 
            font-size: 20px; 
            font-weight: 200; 
        } 
  
        #box::before { 
            position: absolute; 
            content: '::before peseudo element'; 
            top: 0%; 
            right: 100%; 
            padding: 40px; 
            color: white; 
            width: max-content; 
            height: auto; 
            background-color: darkcyan; 
            font-size: 20px; 
            font-weight: 200; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color: green;"> 
        GeeksforGeeks 
    </h2> 
      
    <h3> 
        How to update the CSS properties  
        of pseudo element ::after and  
        ::before using javascript 
    </h3> 
  
    <div id="box"> 
        Hello Geek! 
    </div> 
  
    <br> 
    <button onclick="changeColorPseudoEle()"> 
        Changebgcolor_of_::after_and_ ::before_element 
    </button> 
  
    <script> 
        const changeColorPseudoEle = () => { 
  
            // Selecting the "#box::after" CSS 
            // rule from rule list. 
            let st1 = document.styleSheets[0].cssRules[1]; 
            let st2 = document.styleSheets[0].cssRules[2]; 
  
            // Change the styles of the pseudo element. 
            st1.style.backgroundColor = 'blue'; 
            st2.style.backgroundColor = 'crimson'; 
        } 
    </script> 
</body> 
  
</html>

Output:

In the above code, the document.styleSheets[0].cssRules[1] method will select the first index CSS style rule that is “#box::after” and document.styleSheets[0].cssRules[2] method will select the second index CSS rule that is “#box::before”. After that CSSrule.style.backgroundColor method will change the background color of both the selected pseudo-elements.