Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to manipulate CSS pseudo-elements ::before and ::after using jQuery?
CSS pseudo-elements ::before and ::after cannot be directly manipulated with jQuery since they exist in the CSS layer, not the DOM. However, you can manipulate them indirectly by adding/removing CSS classes or modifying data attributes that your CSS pseudo-elements reference.
Method 1: Using CSS Classes
The most common approach is to define different CSS rules for pseudo-elements and toggle classes using jQuery ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.box {
position: relative;
padding: 20px;
background: #f0f0f0;
margin: 10px 0;
}
.box::before {
content: "Before: ";
color: blue;
font-weight: bold;
}
.box.active::before {
content: "Active Before: ";
color: red;
}
.box::after {
content: " [Default]";
color: gray;
}
.box.active::after {
content: " [Modified]";
color: green;
}
</style>
</head>
<body>
<div class="box">Main Content</div>
<button id="toggle">Toggle Pseudo-elements</button>
<script>
$(document).ready(function(){
$('#toggle').click(function(){
$('.box').toggleClass('active');
});
});
</script>
</body>
</html>
Method 2: Using Data Attributes
You can use the CSS attr() function to dynamically pull content from data attributes ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
span {
position: relative;
padding: 10px;
background: #e8f4f8;
cursor: pointer;
}
span::after {
content: attr(data-content) ' This is demo text.';
color: #333;
margin-left: 5px;
}
</style>
</head>
<body>
<p>Hover over the text below ?</p>
<span data-content="foo">Original Text</span>
<script>
$(document).ready(function(){
$('span').hover(
function(){
$(this).attr('data-content', 'bar');
},
function(){
$(this).attr('data-content', 'foo');
}
);
});
</script>
</body>
</html>
Method 3: Dynamic CSS Injection
For more complex scenarios, you can inject CSS rules dynamically using jQuery ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.dynamic-element {
padding: 15px;
background: #fff3cd;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="dynamic-element">Dynamic Content</div>
<button id="addPseudo">Add Pseudo-element</button>
<script>
$(document).ready(function(){
$('#addPseudo').click(function(){
var css = '.dynamic-element::before { content: "? "; color: gold; }';
$('<style>').prop('type', 'text/css').html(css).appendTo('head');
$(this).prop('disabled', true).text('Pseudo-element Added');
});
});
</script>
</body>
</html>
Conclusion
While jQuery cannot directly access pseudo-elements, you can effectively manipulate them by toggling CSS classes, modifying data attributes, or dynamically injecting CSS rules. The data attribute method is particularly useful for dynamic content changes.
3K+ Views
