How to Select and Manipulate CSS pseudo-elements using JavaScript / jQuery ?

Last Updated : 02 Aug, 2023

In this article, we will learn how to select and manipulate CSS pseudo-elements using JavaScript (or jQuery). CSS pseudo-elements allow developers to style and enhance specific parts of an HTML document with the help of selectors like::before and::after, which provide the flexibility to add decorative content, modify layouts, and create unique visual effects. Here we are manipulating CSS pseudo-element with the help of Javascript or jQuery methods.

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected elements. For Example, Styling the first letter or line of an element.

Approach 1: Using JavaScript

The first approach to select and manipulate the CSS pseudo-elements is by using JavaScript. In this, we are going to use the::after pseudo-element of CSS to manipulate its styles, etc.

Example: Below example demonstrates selecting and manipulating the:: after pseudo-element using Javascript.

In JavaScript, an event listener is added to the .myclass element. When the element is hovered over, the data-content attribute is updated with the value “This is Hovered After”. When the mouse moves out of the element, the data-content attribute is set back to “This is After”.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .myclass::after { 
            content: attr(data-content); 
            color: green; 
            font-size: 30px 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h2> 
        How to select and manipulate CSS 
        pseudo-elements in JavaScript 
    </h2> 
      
    <div class="myclass" data-content="This is After"></div> 
      
    <script> 
        document.addEventListener("DOMContentLoaded", 
            function () { 
                let myclass = document.querySelector('.myclass'); 
  
                myclass.addEventListener("mouseover", 
                    function () { 
                        myclass.setAttribute('data-content', 
                            'This is Hovered After'); 
                    }); 
  
                myclass.addEventListener("mouseout", 
                    function () { 
                        myclass.setAttribute('data-content', 
                            'This is After'); 
                    }); 
            }); 
    </script> 
</body> 
  
</html>

Output:

ezgifcom-crop-(33).gif

Approach 2: Using jQuery

The second approach to select and manipulate the CSS pseudo-elements is by using jQuery. Here, we will be using the attr() function that allows you to retrieve the value of an attribute and use it as a value for a CSS property.

Example: Below example demonstrates selecting and manipulating of: after pseudo-element using jQuery attr() and hover() method.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .myclass::after { 
            content: attr(data-content); 
            color: green; 
        } 
    </style> 
    
    <script src= 
"https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <h2>How to select and manipulate CSS 
        pseudo-elements jQuery 
    </h2> 
    <div class="myclass" 
         data-content="This is After"> 
      </div> 
    <script> 
        $(document).ready(function () { 
            $('.myclass').hover( 
                function () { 
                    $(this).attr('data-content',  
                                 'This is Hovered After'); 
                }, 
                function () { 
                    $(this).attr('data-content', ''); 
                } 
            ); 
        }); 
    </script> 
</body> 
  
</html>