JavaScript修改CSS伪元素:after和:before的样式

CSS伪元素:before和:after可以实现很多有趣的功能，我们项目中使用的ionicframework框架的ionic.css文件中大量使用到了这2个伪元素。伪元素可以用来定义样式，但是和正常的dom元素不同，我们没有办法选中这些伪元素，也就不能像普通元素那样来修改它。

	

	


	red
	green
	blue
	
	

		I am a programmer.
	

这段HTML中我们用到了:before和:after在content前面和后面添加了target-before和target-after。如果我们想实现这个功能：点击按钮的时候，将target-before和target-after变成相应的颜色。这个时候我们就需要修改伪元素中定义的样式了。

我们没有办法直接选中伪元素来修改它的样式，只能是通过新增伪元素来覆盖之前伪元素的样式。

function changeColor(colorRGB)
{
	$("
	
	

	


	red
	green
	blue
	
	

		I am a programmer.
	

还有一点值得注意：如果我们只是需要修改伪元素的content属性，那么可以有更简单、优雅的实现方式。可以使用attr函数，伪元素的content属性支持这个方法。

ribbonElement.setAttribute('ribbon', )

参考文章:

http://www.28im.com/css/a937345.html

http://www.backalleycoder.com/2012/08/09/mvcr-minimum-viable-css-ribbon/