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.
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:
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;" >
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 >
|
Output:
Share your thoughts in the comments
Please Login to comment...