基于伪元素（before/after）的有趣实例

伪元素的英文是pseudo-element，意思是虚假的元素。

在CSS2中，伪元素（如:before）与伪类（如:hover）都是以单引号开头；
在CSS3中，为了跟伪类区分，变成双冒号（如::before），但为了浏览器兼容，大多数还在继续使用单冒号。

总体概括，伪元素有以下几个重点：
1. 必须设置content
2. 伪元素插入的默认为内联元素
3. 伪元素上可以使用伪类（div:hover:before）
4. 伪元素可以添加transition等属性
5. 多重伪元素（div:before:before）也许在不久的未来就可以使用

应用before/after，做了几个有趣的例子，分享一下（请用chrome查看）

https://crossjae.github.io/02pseudo.html

 

转载于:https://www.cnblogs.com/crossjae/p/5626914.html