伪类before和after

Posted 2020-07-27 起个好名字

　　有时候，我们需要大量的重复代码去实现一个非常简单的功能，这不仅浪费时间，而且效率低下，例如：

<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属性不写的话，是不会有东西出来的。