Selecting and manipulating CSS pseudo-elements such as ::before and ::after using JavaScript (EASY WAY)

#javascript #css #todayilearned

So this title you are looking at - Yes its an actual stackoverflow question.The question has 980 upvotes and it's top answer has 723 upvotes. Then the question arises, why write an article about it then. Well, for starters I really wanted to answer this question, but since I didnt have enough "reputations",this article is my way of letting people know of this new easy method.

First things first

Scenerio 1:
Imagine you want to grab an element using JavaScript and change its color using JavaScript. Its pretty easy, here we go:

//HTML
<div id="text">Hey there !</div>

//CSS
#text{
color: red;
}

//JS
const text = document.getElementById('text');
text.style.color = 'blue';

Scenerio 2:
This time we create a :before pseudo element on the #text element and then try to change the pseudo element's background color. So lets see what happens here:

Create a basic pseudo element with the styling(if you are new to creating a pseudo element, I suggest you learn that first and come back here):

//CSS
#text{
color: red;
position: relative;
}

#text:before{
  position: absolute;
  height: 25px;
  width: 100px;
  background: black;
  top: -30px;
  left: 0;
  content: "";
}

Now just a little twist to this, instead of using black as the background color, we are gonna create a :root element in our CSS file inside which we will create a variable '--pseudo-backgroundcolor' with a value of 'red' and use this varible as the value for 'background' as shown below.

//CSS
:root{
--pseudo-backgroundcolor: red;
}

#test:before{
 background: var(--pseudo-backgroundcolor);
}

So by now I hope you are getting some hint of where I am heading. No ? Okay, let me explain. Our goal is simple, we should create a global background color variable and with the help of JavaScript we will grab the root value of the variable and update it using JavaScript so that the effect will be applied to the pseudo elements background color style automatically.

Lets get to work:

//JS
const root = document.querySelector(":root"); //grabbing the root element

**important part below** 

root.style.setProperty("--pseudo-backgroundcolor", 'green');

So as you can see, we grabbed the --pseudo-backgroundcolor varible and used setProperty function to first select the variable and then set its color value from red to green. This is pretty much the code we need.So now if we ever need to change the color, you can just do this dynamically.An example would be to create a button and on click of that button, you can loop through an array of different colors and apply it to this varible.

In the stackoverflow answer, you can see other right ways too, but they just seemed a bit long, while this one just needs you to set the root variable and just write some JS code.

BONUS PART:

Suppose you want to add a text to a pseudo element - we usually add text using the content = "" property.So instead of "" , just create a root variable like we did above and manipulate it using one line of JavaScript.Here's the code:

//CSS 
:root{
--pseudo-text: "just some text";
}

#text:before {
  content: var(--pseudo-text);
}

//JS
root.style.setProperty("--pseudo-text", `"YAY new text"`);
//**!! Dont forget to add the 'double quotes' around this new text above or else you can't see any changes

So thats it, Hope you learned something new today or even saved time finding this solution. I got to find this solution while I was making my app - PrettyCover - which you can use to create Beautiful Cover Images for your blogs.In fact, I have made this cover image using PrettyCover. I would appreciate if you could go and try it out, and if you like it, don't forget to ⭐ the repo.

Also, here is the codePen containing the full example codes: https://codepen.io/ridzman/pen/poEgPGq?editors=0011

And as always ending the article with a Gif. Please do let me know if there are any corrections or clarifications to be made. Ciao !

Top comments (11)

Rishav Jadon • Dec 6 '20

Wow this is genius! I could never think of this🤯. Amazing ridhik👍

Ridhik Govind • Dec 6 '20

Hehe thanks Rishav ;-) . It took me a day to figure this trick out but it was worth it I guess.

Stehlampe2020 • Jun 17 '22 • Edited

On SO you can post answers without rep restriction.
What users on SO can do without rep restrictions: ask, answer and edit.
The only restriction is when the question is too active, I think when it has more than ten answers or such...