CSS 伪对象选择符: before、after

CSS 伪对象选择符

语法：

E:before/E::before { sRules }

说明：

设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性。

CSS3 将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法依然有效。

即E:before可转化为E::before

兼容性：

1.本质上并不支持伪元素的双冒号(::)写法，而是忽略掉了其中的一个冒号，仍以单冒号来解析，所以等同变相支持E::before。

2.不支持设置属性position，float，list-style-*和一些display值，Firefox3.5开始取消这些限制。

3.IE10在使用伪元素动画有一个问题：

 

.test:hover {}
.test:hover::before { /* 这时animation和transition才生效 */ }

 

需要使用一个空的:hover来激活

备注：E:after/E::after同上

参考链接：https://www.css88.com/book/css/selectors/pseudo-element/after.htm