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