标签：
有时候，我们需要大量的重复代码去实现一个非常简单的功能，这不仅浪费时间，而且效率低下，例如：
<div class="aa">你好</div>
<div class="aa">我好</div>
<div class="aa">大家好</div>
<div class="aa">前面和后面</div>
<div class="aa">你好</div>
<div class="aa">我好</div>
<div class="aa">大家好</div>
<div class="aa">前面和后面</div>
<div class="aa">你好</div>
<div class="aa">我好</div>
<div class="aa">大家好</div>
<div class="aa">前面和后面</div>
<div class="aa">你好</div>
<div class="aa">我好</div>
<div class="aa">大家好</div>
<div class="aa">前面和后面</div>
我们如果需要为每一个div添加一个动态的括号滑动出现和消失的css3动画，那么，接下来可以想象就是不停地对每一个div 的前面和后面或者里面添加两个div。这样费事费力的差事每一个会偷懒的程序猿都不会干的，于是，这里我们可以用伪类轻松解决。
在css中，为aa添加两个伪类——
.aa::before{
display: inline-block;
content: ‘[‘;
transform: translateX(30px);
opacity: 0.1;
}
.aa::after{
display: inline-block;
content: ‘]‘;
transform: translateX(-30px);
opacity: 0.1;
}
仅仅是这样就足够了，可以看到每一个aa 的div前后都有了括号（调一下opacity可以看的更清楚）。
如果需要动态效果，也只需要——
.aa::before,.aa::after{
transition-property: transform opacity ;
transition-duration: 0.8s;
transition-timing-function: linear;
}
.aa:hover::before,:hover::after{
transform: rotateX(0);
opacity: 1;
}
便可以轻松愉快的搞定了。
较为注意的是，使用transfrom:rotateX的时候，如果它们不是行内元素就可能无效。
还有，如果content属性不写的话，是不会有东西出来的。
标签：
原文地址：http://www.cnblogs.com/thestudy/p/5601820.html
