css 伪类::after ::beftor 的使用方式
注释:对于 IE8 及更早版本中的 :before,必须声明 <!DOCTYPE>。
::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见过最多的就是清除浮动。
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
从我36级转72级英语翻译出来可以看出before与after是之前与之后的意思。
那么就是一个是插入之前,一个是插入之后了。
对以上就是w3school里面的图,你懂了吧。
:before 选择器在被选元素的内容前面插入内容,要使用 content 属性来指定要插入的内容。
设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性
CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符.
IE10在使用伪元素动画有一个问题:
例如:
>.test:hover {}
>.test:hover::before { /* 这时animation和transition才生效 */ }
通过分享,结交好友~ 如本文对您有益,请给予关注。转载请注明出处!-- 小数