如何修改css伪元素的样式

首先说一下变成思想，众所周知，css伪元素是不可以修改的，首先你查找他的元素就很困难，不知道怎么查找的可以看一下我的另一篇原生js查看css伪元素属性，那么我们应该怎么修改呢 。 其实换一种思维事情就变的很容易了，我们修改不了伪类，但是我们可以修改class吧 ？本文介绍的就是如何通过修改元素的class来实现修改css伪类的方法 ：

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>

页面效果 ：

现在我想点击div的时候将::after变成黄色

$("div").click(function(){
$("div").attr("class","yellow")

})

代码非常简单，这里主要介绍的是这个编程思想，根据你自己的业务需求去改吧，虽然用的很少，但是做input样式美化的时候可能会用到。