基于伪元素(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