How can select ::before with jQuery

How can select ::before element as is not part of DOM?

Any tricks know someone? Update with .css


::before is a pseudo-selector, not a dom element. So you can’t select it.

I haven’t tried these methods, but they seem to be the most upvoted workarounds

What you can do is to add a CSS variable to your main element then use that variable for the property you want to change on the pseudo element.

If you only need to change CSS.


#div {
  position: relative;
  height: 50px;
  width: 50px;
  background-color: red;
 --myVar: defaultValue;

#div::before, #div::after {
    position: absolute;
    content: "";
    right: -60px;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: var(--myVar);


document.getElementById('#div').style.cssText('--myVar: blue');


$('#div').css('--myVar', 'value');