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才生效 */ }