First of all, let’s talk about thinking. As we all know, CSS pseudo-elements cannot be modified. First of all, it is very difficult for you to find his elements. If you don’t know how to find them, you can look at my other native js to view CSS pseudo-element properties , then How should we modify it. In fact, it becomes very easy to change the way of thinking. We can't modify the pseudo-class, but we can modify the class, right? This article introduces how to modify the CSS pseudo-class by modifying the class of the element:
div{
height: 200px;
width: 200px;
background: red;
border: 1px solid #DFDFDF;
}
.green::after{
content: "";
display: inline-block;
height: 100px;
width: 100px;
background: green;
}
.yellow::after{
content: "";
display: inline-block;
height: 100px;
width: 100px;
background: yellow;
}
html:
<div class="green"></div>
page effect:
Now I want to make the ::after yellow when the div is clicked
$("div").click(function(){
$("div").attr("class","yellow")
})
The code is very simple. The main introduction here is this programming idea. Change it according to your own business needs. Although it is rarely used, it may be used when beautifying the input style.