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;"> neveropen </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:
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= </script> </head> <body> <h1 style="color: green;"> neveropen </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> |
Output:
