認識：before和：after僞類

有時候，咱們須要大量的重複代碼去實現一個很是簡單的功能，這不只浪費時間，並且效率低下，例如：

<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屬性不寫的話，是不會有東西出來的。