How can select ::before with jQuery

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

Any tricks know someone? Update with .css

Thanks.

::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.

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);
}

JS:

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

JQuery:

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