How to change the size of a :before or :after dynamically with Jquery?

Question

Can anyone tell me if it is possible to change the size of a :before or :after dynamically with jquery?

Ex:

$('#elemento:before').css({'width':'100px'});

Answer 1

You can’t get access to pseudo-elements via Javascript because they are not part of the DOM. What you can do is create a specific class with new styles and add to the element.

In the example below, see that the ::after has initially 50% of width, and after adding the class .after, He went on to be 10%:

// adiciona a classe que altera o width do ::after
$("#teste").addClass("after");

#teste{
   width: 200px;
   height: 50px;
   background: red;
}

#teste::after{
   content: 'after';
   display: block;
   width: 50%;
   height: 50px;
   background: yellow;
}

/* classe que irá alterar o ::after */
#teste.after::after{
   width: 10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste">
   principal
</div>

Edit

You can inject a dynamic CSS into the page and do the same as in the example above, but now with the width according to the child element.

Below the ::before has the same width as the main element (100%). After adding a child element, the script changes the width of ::before adding the class .before, that has the same width of the element dynamically added:

$("button").click(function(){
   
   $("#teste").append('<div id="filho">filho</div>');

   var filhoW = $("#filho").width();
   
   $("body").append("<style>#teste.before::before{width: "+filhoW+"px;}</style>");
   
   $("#teste").addClass("before");
   
});

#teste{
   width: 100%;
   height: 80px;
   background: red;
   position: relative;
}

#teste::before{
   content: 'before';
   display: block;
   width: 100%;
   height: 30px;
   background: yellow;
   position: absolute;
   bottom: 0;
}

#filho{
   width: 80px;
   background: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste">
   abc
</div>
<button type="button">Adicionar filho</button>