:before 选择器在被选元素的内容前面插入内容。
定义中提到，是在被选元素的 内容 前面插入内容，如下图，div 是一个容器，div 中的内容是 testDiv元素 ，css 中的 :before 和 after 都显示在 div 内部，二者分别位于 testDiv元素 内容的前后。
所以可以看到，伪元素也是被选元素的内容，只是会插入到被选元素原本内容的前后。
插入的伪元素默认是 display 属性，如果想要为伪元素设置宽高等，需要修改伪元素的 display 属性为 inline-block 或者 block 。
伪元素插入的位置是被选元素的 内容 的前或者后，因此本质上伪元素也是被选元素的子元素。所以定位时，被选元素就是伪元素的父元素。
如图，被选元素 test-div 设置了 position: relative ，外部元素 test-wrapper 也设置了 position: relative ，然后对被选元素的伪元素 :after 设置定位，可以看到，伪元素的位置是根据 test-div 来定位的，因此，可以验证 被选元素就是伪元素的父元素 这句话。
首先要明白一种思想：结构和样式分离。
结构和样式分离，就意味着：没有样式表，HTML文档也是一个完整的文档；没有样式表，也能正常阅读用HTML表达的所有内容。明白这种思想就能很好理解样式表中使用------ :before 和 :after中的content: ""------就算没有------:before 和 :after中的content: ""------HTML文档也不会受到影响，HTML文档也是一个完整的文档，所以，用简单的话来说： :before 和 :after中的content: ""不过是对HTML的装潢，使HTML看起来更漂亮一些。
延展阅读
CSS中伪元素after的作用
css可以对元素做的事，对这个伪元素都可以做，然后也不奇怪能做出个三角形了（三角形是用很宽的边框+内容宽高都为0做出来的）。
但是，伪元素因为不在DOM里存在，也不会在调试工具里显示，所以不太好调试伪对象:after还有一个重要的用法--清除浮动。
这种清除浮动的方法几乎成了一个固定的模式，很多大型网站里面都有用到。
以下代码：
.weibo-clearfix:after{clear:bothcontent:"."display:blockheight:0width:0visibility:hidden}
就是可以在某个标签的前面或者后面添加一个虚拟元素,需结合content使用可以像设置普通标签一样设置该元素的css样式 如下:
div:after {
visibility: hidden
clear: both
display: block
height: 0px
content: "."
}
这段代码可以闭合浮动元素
