在网页中，如果需要使用辅助性/装饰性的内容的时候，这就需要使用伪元素了。在使用伪元素的时候，会发现js并不真能直接控制它，这篇文章主要就介绍下如果间接的控制、修改css中伪元素的方法
<style>
p:after{content:'after伪元素'}
</style>
<p id="dome">正文内容</p>
方法一：样式覆盖
<script>
document.onclick=function(){
var sty=document.createElement('style');
sty.innerText='p:after{content:\'修改一下\'}';
document.body.appendChild(sty);
};
</script>
优点：任何字符串都可以动态插入到样式中。
缺点：原始风格不改变，只是重写; 反复使用document.createElement()可以使DOM量增加
方法二：class名重写
p.special:after {content: "修改一下";}
<script>
document.onclick=function(){
var p=document.getElementById('dome');
p.setAttribute("class","special");
};
</script>
优点：易于实现; 能通过js迅速改变多种风格; 能使用样式在js中分离出去。
缺点： CSS必须预先写好，所以伪元素中内容不是完全动态的
方法三：使用css中attr()
<style>
p:after {
content: attr(data-after);
}
</style>
<p id="dome">正文内容</p>
<script>
var p=document.getElementById('dome');
p.setAttribute("data-after","我是后缀");//初始值
document.onclick=function(){
p.setAttribute("data-after","修改一下");
};
</script>
优点：不会创建无尽的额外风格
缺点： attr()在CSS中只能应用于内容字符串，而不能使用URL或RGB颜色
服务热线 19970861797
