Is it possible to set styles to pseudo elements in Javascript?

Question

Kindly show your workaround code 😉

Answer 1

I doesn't seen 'in javascript' when I previously read your question ^^

You cannot set pseudo-style element by classical way of using 'style' attribute of html element, but you can:
- set a classname to this element, with style definition for the targeted pseudo-element ( easiest )
- set dynamically style sheet rules ( hardiest - require browsers specificities: not handle by same way in ie, firefox, chrome... )

Answer 2

@visph. I need to check how to set style to pseudo elements in JAVASCRIPT.

Answer 3

@Very Hard:

What a great sharing stuff ^^ : you post in comment instead answer here, and delete it quickly :P
Anyway... I'm probably wrong, but using querySelector() method with pseudo-element selector seems not to work :( ( but I have no more time now to continue testing, and I cannot look again at your deleted comment )

Answer 4

Yes you can:

https://www.w3schools.com/css/css_pseudo_elements.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Answer 5

Yes; to be sure we are sharing the same definition of "pseudo element" ;P

... and first link provide styling example ( no need of workaround, as you can ^^ )

Answer 6

document.querySelector('div::before') will return null with this in html:

<style>div::before { content:'before'; }</style>
<div>test</div>

Answer 7

Hi @visph. This is css reference.

Answer 8

@Very hard 😕

Answer 9

Thanks anyway @Very. I got it.

Answer 10

@visph you're right. Js cannot set the style directly. I have the other method to workaround this now by remove and add class