.info:before{
content:"infomation"
border:1px solid #ccc
}
.info_other:before{
content:"infomation"
border:2px solid #000
}，
然后需要修改的时候把.info改成.info_other
:before 选择器在被选元素的内容前面插入内容。
定义中提到，是在被选元素的 内容 前面插入内容，如下图，div 是一个容器，div 中的内容是 testDiv元素 ，css 中的 :before 和 after 都显示在 div 内部，二者分别位于 testDiv元素 内容的前后。
所以可以看到，伪元素也是被选元素的内容，只是会插入到被选元素原本内容的前后。
插入的伪元素默认是 display 属性，如果想要为伪元素设置宽高等，需要修改伪元素的 display 属性为 inline-block 或者 block 。
伪元素插入的位置是被选元素的 内容 的前或者后，因此本质上伪元素也是被选元素的子元素。所以定位时，被选元素就是伪元素的父元素。
如图，被选元素 test-div 设置了 position: relative ，外部元素 test-wrapper 也设置了 position: relative ，然后对被选元素的伪元素 :after 设置定位，可以看到，伪元素的位置是根据 test-div 来定位的，因此，可以验证 被选元素就是伪元素的父元素 这句话。
::before，::after是伪元素并非doom元素，所以jquery无法选择伪元素。
如果确实需要实现修改伪元素的样式，可以通过下面的例子。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>pseudo-elements test by zhou2003737</title>
<style type="text/css">
p{
color: deepskyblue
}
p:before{
content: attr(data-beforeContent)
color: darkred
}
</style>
</head>
<body>
<p data-beforeContent="测试">1111</p>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
<!--使用jquery1.8之前版本 click方法更改为toggle-->
var times = 0
$('p').on('click',function(){
switch (times){
case 0:
$(this).attr('data-beforeContent','你说啥都是对的')
times++
break
case 1:
$(this).attr('data-beforeContent','你这么叼咋不上天呢')
times++
break
case 2:
$(this).attr('data-beforeContent','那就上天吧')
times++
break
default :
times =0
$(this).attr('data-beforeContent','你说啥都是对的')
times++
break
}
})
})
</script>
</html>
