How to modify pseudo-class styles with JavaScript

We have all heard of CSS pseudo-classes but not that JavaScript also has pseudo-classes. In projects, we often need to use JavaScript to dynamically control the styles of pseudo-elements (:before,:after), but we all know There are no pseudo-class selectors in JavaScript or jQuery. Here is a summary of several common methods.

HTML

<p class="red">Hi, this is a plain-old, sad-looking paragraph 
tag.</p>
CSS
.red::before {
content: &#39;red&#39;;
color: red;
}

Method 1

Use JavaScript or jQuery to switch the class name of the

element and modify the style.

.green::before {
content: 'green';
color: green;
}
$('p').removeClass('red').addClass('green');

Method 2

Dynamicly insert a new style into the existing