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

			red	green	blue		
     
      		I am a programmer.	
     

这段HTML中我们用到了:before和:after在content前面和后面加入了target-before和target-after。假设我们想实现这个功能：点击button的时候，将target-before和target-after变成对应的颜色。这个时候我们就须要改动伪元素中定义的样式了。

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

function changeColor(colorRGB){	$("").appendTo("head");	$("").appendTo("head");	$("#dynamic-before").text(".content:before{color:#" + colorRGB+ ";}");	$("#dynamic-after").text(".content:after{color:#" + colorRGB+ ";}");}

这段代每次点击button的时候。我们都会追加:after和:before样式(改变文字颜色)，这样能够实现改变伪元素样式的目的。

上面这样的做法直接将css写在了js文件里。一般不是我们推荐的做法。

我们能够预先将须要的样式定义在css文件里，然后在js中通过改动class来实现匹配新的样式。

					red	green	blue		
     
      		I am a programmer.	
     

另一点值得注意：假设我们仅仅是须要改动伪元素的content属性，那么能够有更简单、优雅的实现方式。

能够使用attr函数。伪元素的content属性支持这种方法。

     
      ribbonElement.setAttribute('ribbon', 
      )
     
     

參考文章: