JQuery modifies CSS pseudo element attributes

CSS pseudo elements are not DOM elements, so you cannot select them directly.

Suppose you have the following HTML code:

<div class="techbrood" id="td_pseudo">techbrood introduction</div>

And CSS code:

.techbrood:before {
width: 0;
}

Now you want to dynamically set the techbrood:before width property to 100% in the click event of an element,

There are two methods, one is to add a new style:

$('head').append("<style>.techbrood::before{ width:100% }</style>");

(note that this method will affect all class as techbrood elements)

Another method is to add a new class to the element and change the pseudo-element attributes by setting the attributes of the new class:

.techbrood.change:before{
width: 100%;
}

JQuery code:

$('#td_pseudo').addClass("change");