js,jq改变cssbefore或after的伪类的样式

当我们把样式绑定在伪元素上，但是需要通过js调整这个伪类的样式的时候，CSS伪元素（pseudo elements）不是DOM元素，因此你无法直接选择到它们。这时候操作的方式如下：

html：

<p class="red">Hello,are you kain?</p>

 css样式

.red:before {
    content: 'red',
    background-color  : red
}

1.使用javascript或者jQuery切换，增加元素的类 

.green:before {
    content: 'green';
    background-color: green;
}

$('p').addClass('green');

2.在存在的style文档中动态插入样式

document.styleSheet[0].addRule('.red:before','background-color:green');
document.styleSheet[0].insertRule('.red:before{background-color:green}',0);

 3.创建一份新的样式表，并使用JavaScript或jQuert将其插入到中

var style = document.creatElement('