:before和:after这两个伪元素在真正的页面元素之前和之后插入一个额外的的元素，等效于下面的代码：
<p>
<span>:before</span>
HTML中真正的内容
<span>:after</span>
</p>
在HTML的源代码里面是找不到伪元素的内容的。
用法
:before和:after伪元素在p元素之前和之后插入新内容，使用content属性,并且可以设置css属性。
p:before{
content:open-quote;
color：#fff;
}
p:after{
content:close-quote;
color:#000;
}
在默认的情况下，这两个伪元素生成的元素是内联元素，如果要设置宽度和高度，需要先display：block;
伪类和伪元素可以同时使用，如：
p:hover:before,p:hover:after{
background-color:#aaa;
}
：after还可以用来清除浮动
.clear:after{display:block;content:"";0;clear:both;}