How jQuery modifies CSS pseudo-element attributes_jquery

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

Suppose there is 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 width attribute of techbrood:before 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 elements with class techbrood)

Another method is to add a new class to the element and set the attributes of the new class to achieve the effect of changing the attributes of the pseudo element:

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

jQuery code:

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