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:
.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>
Output:
.gif)
Similar Reads
How to select multiple elements using jQuery ? In this article, we will learn how to select multiple elements using JQuery. JQuery is the fastest and most lightweight JavaScript library that is used to simplify the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. JQuery is widely famou
2 min read
How to Update Properties of Pseudo Element :after and :before using Javascript ? 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
4 min read
How to apply CSS in a particular div element using jQuery ? In this article, we will set the CSS of a div element using jQuery. We will use the CSS property to set the CSS.Approach: We will create a div element with some text and hyperlinks. Then we will use jQuery to apply CSS to the div element. jQuery comes with the function .css() where we can get and se
2 min read
How to Change CSS Properties using JavaScript EventListner Methods ? In this article, we will be using JavaScript to update the web page's CSS styling by taking input from the user. Generally, we have seen a few webpages update the various styling properties dynamically by taking the user input that enhances the user interaction with the webpage, along with improving
3 min read
How to Remove and add Style with .css() Function using JavaScript? There are many cases, especially as the content gets more interactive, where the developer wants styles to dynamically kick in based on user input, some code having run in the background, and more. In these sorts of scenarios, the CSS model involving style rules or inline styles doesn't help. The so
3 min read
How to move one DIV element inside another using jQuery ? In this article, we will learn to move one HTML div element inside another using jQuery. The HTML div element is used to define a division or a section in an HTML document.Method used: parent(): This method is used to get the parent of each element in the current set of matched elements, optionally
2 min read