对伪元素::after和::before的理解

:before和:after在css1中就有了，但是在css3中写法改为了::before 和 ::after以便于和之前做区别，用哪种方式无所谓，但是IE8只支持 :after这种写法，所以我平常多用单冒号这种主要能够实现功能有



能够用伪元素实现的功能

1.用来做小三角或者小箭头之类的



具体实现代码



2.为一段儿文字添加代码块

甚至我们能够设置鼠标hover时候的效果



GIF图
具体实现代码



3.hover时的特效

特效1



GIF图
具体实现代码如下



特效2



GIF图
具体实现代码



4.清除浮动

关于浮动的原理和造成的影响，大家可以看此链接，这里只讨论用伪元素after来清除浮动的影响



具体代码如下



5.分割线



具体代码



6.css计数器
css计数器是由css维护的变量，这些变量可能根据CSS规则增加以跟踪使用次数



具体实现代码如下



html结构



css样式
关于css计数器的更具体的用法如下



具体代码如下



html结构
下面是css样式，注意注释部分



css样式
7.画平行四边形



代码如下：



我们发现，里面的字体也变倾斜了，那么如何避免呢？
在div里面嵌套一层也能完全避免



另外一种就是采用:after和:before来写了

咱们先看一下边框设置为20px宽高为0的div长什么样子





具体代码示例



html代码



css样式