js如何控制css偽元素內容（before，after）

曾經遇到的問題，在對抗UC瀏覽器屏蔽需要把內容輸出到css 偽元素中輸出。有個疑問如何用js控制它。於是在segmentfault提問，如下是對問題的整理：

如何用js控制css偽類after

簡單粗暴的方式：

簡單粗暴的方式，直接在html中添加樣式覆蓋掉之前樣式規則

<style>
	p:after{content:'我是后綴'}
</style>
<p>正文內容</p>

<script>
var css=function(t,s){
    s=document.createElement('style');
    s.innerText=t;
    document.body.appendChild(s);
};

document.onclick=function(){
    css('p:after{content:\'修改一下\'}');
};
</script>

進化版

這樣寫了功能實現了，優雅欠佳，作為進化版，其實就是用class名來重寫樣式，

p:after{content:'我是后綴'}
p.change{content:'我是修改過的后綴'}

只要在需要的時候，給p標簽添加change這個class就可以實現替換的目的。原理和第一個沒什么區別。這樣寫的好處是，改變起來更優雅靈活，用class做了個鈎子。

再進化版

上個版本已經解決了切換的問題，如果有更多可以不斷的切換class，但是想下這種方式也還是有點笨重，因為可能要寫很多css，如果是想換的內容是不確定的，需要用變量來處理呢？這時候，可能會想到用 第一種方法就可以了，但是第一種方式真的不是很優雅。還有什么方式呢？
在css中，偽元素的content是能讀取到data屬性的。
也就是說我們可以這樣寫css

p:after {
	content: attr(data-content);
}

在進化版是第二版的變種，

css文件

p.change:after {
	content: attr(data-content);
}

js文件

$(this).addClass('change').attr('data-content', content);

這樣你就可以隨意改動了。

不是終極版的終極版

最后一種方法是由bumfod提供方法很hack了，遍歷了所有的css文檔，找到偽元素，然后更改，有興趣的同學可以嘗試下
http://jsfiddle.net/s3fv8e5v/4/