css3新增伪元素选择器::before和::after的概念和实际应用（京东banner小点特效）

前言：本人便捷博客能力低下，如果看不懂，请联系我。带来不便，多有抱歉。

一、首先我们需要知道css3新增选择器::before和::after的概念

E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

注意

伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。

二、实例讲解

我最近发现京东的轮播图切换小点特效，百思不得其解，看了源码之后发现其实非常简单。下面是本人写的一个小demo

语言讲解：利用伪元素选择器器给标签插入内容，我们可以理解为给元素中新插入了一个行内标签。我们可以通过定位，以及其他的css操作来控制新增的内容，来达到我们需要的效果。

三、也可以用用来清除浮动

.clearfix:after {  content: ".";overfolw：hidden； display: block; height: 0; clear: both; visibility: hidden;  }   
.clearfix {*zoom: 1;}

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 这句话可以触发BFC 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}