How to Update Properties of Pseudo Element :after and :before using Javascript ?
Last Updated :
06 Jun, 2023
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 pseudo-elements using JavaScript requires a slightly different approach.
To select and update the CSS properties of pseudo-elements, we can use the document.styleSheets[i].cssRules property. This method returns an object of the CSS style rules that include all CSS rules of the ith stylesheet. We can select any CSS style rule and can update the rules.
Syntax:
let obj = document.styleSheets[0].cssRules;
document.styleSheets[0] method will return the first stylesheet attached to the document. document.styleSheets[0].cssRules will return an array-like object that includes all the CSS rules related to all the elements of the document.
Example 1: In the below example, we have created an HTML document and apply styles to the elements of this document. We have created a div and a pseudo-element ::after for this div. A button is also created that will update the CSS properties of this div pseudo-element.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
#box {
width: max-content;
height: auto;
background-color: green;
padding: 40px;
color: white;
font-size: 20px;
font-weight: 200;
position: relative;
}
#box::after {
position: absolute;
content: '::after peseudo element';
top: 0;
left: 100%;
padding: 40px;
color: white;
width: max-content;
height: auto;
background-color: orangered;
font-size: 20px;
font-weight: 200;
}
</style>
</head>
<body>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>
How to update the CSS properties
of pseudo element ::after and
::before using javascript
</h3>
<div id="box">
Hello Geek!
</div>
<br>
<button onclick="changeColorPseudoEle()">
ChangeContent_of_::after_element
</button>
<script>
const changeColorPseudoEle = () => {
// Selecting the "#box::after" CSS
// rule from rule list
let st = document.styleSheets[0].cssRules[1];
// Change the styles of the selected
// pseudo element
st.style.content = '"Content Changed!"';
}
</script>
</body>
</html>
Output:
In the above code document.styleSheets[0].cssRules[1] will select the first index CSS rule from the 0-th stylesheet. The first index CSS style rule is "#box::after". After selecting the "#box::after" CSS style rule the CSSrule.style.content property will change the content of the "#box::after" CSS style rule.
Example 2: In the below example, we have added one more pseudo-element ::before and used javascript methods to change the color of both pseudo-elements ::after and ::before.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
#box {
width: max-content;
height: auto;
background-color: green;
padding: 40px;
color: white;
font-size: 20px;
font-weight: 200;
position: relative;
margin-left: 300px;
}
#box::after {
position: absolute;
content: '::after peseudo element';
top: 0;
left: 100%;
padding: 40px;
color: white;
width: max-content;
height: auto;
background-color: orangered;
font-size: 20px;
font-weight: 200;
}
#box::before {
position: absolute;
content: '::before peseudo element';
top: 0%;
right: 100%;
padding: 40px;
color: white;
width: max-content;
height: auto;
background-color: darkcyan;
font-size: 20px;
font-weight: 200;
}
</style>
</head>
<body>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>
How to update the CSS properties
of pseudo element ::after and
::before using javascript
</h3>
<div id="box">
Hello Geek!
</div>
<br>
<button onclick="changeColorPseudoEle()">
Changebgcolor_of_::after_and_ ::before_element
</button>
<script>
const changeColorPseudoEle = () => {
// Selecting the "#box::after" CSS
// rule from rule list.
let st1 = document.styleSheets[0].cssRules[1];
let st2 = document.styleSheets[0].cssRules[2];
// Change the styles of the pseudo element.
st1.style.backgroundColor = 'blue';
st2.style.backgroundColor = 'crimson';
}
</script>
</body>
</html>
Output:
.gif)
In the above code, the document.styleSheets[0].cssRules[1] method will select the first index CSS style rule that is "#box::after" and document.styleSheets[0].cssRules[2] method will select the second index CSS rule that is "#box::before". After that CSSrule.style.backgroundColor method will change the background color of both the selected pseudo-elements.
Similar Reads
How to use :before or :after pseudo-element to an input field in CSS ? Input tag (<input>) in HTML is used to take input from the user like text input, button input, file input, etc. In CSS, pseudo-elements are basically specific keywords that are added to a selector to style a specific part of the selected element. For example: ::before, ::after etc. The pseudo-
3 min read
How to add/update an attribute to an HTML element using JavaScript? To add/update an attribute to an HTML element using JavaScript, we have multiple approaches. In this article, we are going to learn how to add/update an attribute to an HTML element using JavaScript. Below are the approaches used to add/update an attribute to an HTML element using JavaScript: Table
2 min read
How to use SVG with :before or :after pseudo element ? Using SVG with :before or :after pseudo-elements in CSS allows for the dynamic insertion of vector graphics into HTML elements. This technique enhances design flexibility by leveraging SVG's scalability and interactivity while maintaining a clean HTML structure and reducing HTTP requests for image a
3 min read
How to Select and Manipulate CSS pseudo-elements using JavaScript / jQuery ? 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 decorati
2 min read
How to Change the ID of Element using JavaScript? We are given an element and the task is to change the ID of elements using JavaScript. ID is unique for any element and it can be assigned to an element only once. JavaScript provides a method to access this id and also to manipulate the id. Syntax:Selected_element.id = newID;Below are the appraoche
2 min read
How to change style/class of an element using JavaScript ? In this article, we will learn how we can change the style/class of an element. If you want to build a cool website or app then UI plays an important role. We can change, add or remove any CSS property from an HTML element on the occurrence of any event with the help of JavaScript. There are two com
4 min read
How to replace an HTML element with another one using JavaScript? Replacing an HTML element with another using JavaScript allows for dynamic modification of webpage content without reloading the entire page. Document Object Model (DOM) is a platform and language-neutral interface that is used by programs and scripts to dynamically access the content, style, and st
2 min read
How to use ::before and ::after elements in Tailwind CSS ? In Tailwind CSS, we can use the ' :: before ' and ' :: after ' pseudo-elements by adding utility classes directly in your HTML. Simply apply the "before:" or "after:" prefix followed by the desired utility classes to style elements before or after their content. Using Utility ClassesTailwind CSS off
1 min read
How to change style attribute of an element dynamically using JavaScript ? Given an HTML document and the task is to change the style properties (CSS Properties) of an element dynamically with the help of JavaScript. Approach: Using element.style PropertyThe element.style property is represented by the CSSStyleDeclaration object, which is returned via the style property. S
2 min read
How to insert a DOM element after all paragraphs using jQuery ? In this article, we will insert a DOM element after all paragraph elements using jQuery. To insert a DOM element we use after() and createTextNode() methods. The createTextNode() method is used to create a TextNode which contains an element node and a text node. It is used to provide text to an elem
1 min read