JS change elements css with :before

Question

I am not a pro at css but I need somehow to access this styles:

.file__add:before {
      content: '';
      width: 56px;
      height: 56px;
}

I want to change this css snippet but I only know how to point to the main class (file__add):

$('.file__add').css('width', '200px')

How to point to that class with (:before) tag? Hope you got it, please help!

::before is a [pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements), not a dom element. So you can’t select it. — angel.bonev, Jun 07 '22 at 11:37
What exactly you want to do with the pseudo-element? Set the width to 200px? If that's the case, take a look at [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). See also [this SO answer](https://stackoverflow.com/a/49618941/1169519). — Teemu, Jun 07 '22 at 11:38
Maybe something like this `document.styleSheets[0].addRule('.file__add:before', 'width: attr(data-width)'); $('.file__add').data("width", 200px)`; — angel.bonev, Jun 07 '22 at 11:42
Guys guys nevermind, the question is downgraded. This is not what I wanted to ask, sorry and huge thanks to all of you for your effort! — Mammadali Mammadaliyev, Jun 07 '22 at 11:47

score 0 · Answer 1 · answered Jun 07 '22 at 11:46

0

$('.file__add').addClass("newClass");

.newClass:before{
content:"";
width:5px;
height:5px:
}

add a new class to your element and then apply :before pseudo element to that class

answered Jun 07 '22 at 11:46

Muhammad Qasim

1 Answers1