炫酷的before和after

css有两个不常用的伪元素，:before和:after，但是这两个元素却能在我们的页面中带来许多做不出来的效果，比如小icon啊、动态的效果啊，阴影啊等等，只有你想不到的。在css3的时候出现了::双冒号，用来区别:hover之类的伪类，但是为了支持IE8浏览器，所以还是用单冒号:比较保险。

他们的作用

伪元素，他们不是真是存在DOM文档中的，他们虽然在页面中能看见，但是却在源代码中找不到，他们是会在内容元素的前后额外插入的元素。

小例子

<p>博主好帅</p>

p:before {
	content: "↓";
	color: #fff;
	background: #D63A3A;
}
p:after {
	content: "##";
	color: #fff;
	background: #D63A3A;
}

博主好帅

旋转小火轮

<div class="circle"></div>

 .circle {
 	position: relative;
 	margin: 20px auto;
 	width: 190px;
 	height: 190px;
 	background-color: #eee;
 	border-radius: 100%;
cursor: pointer;
background: url("/uploads/mayEnIcon.png");
background-position: 50%;
 }
 .circle:after {
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     transform: rotate(45deg);
 }
 .circle:hover:before,
 .circle:hover:after {
 	box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5),
 				inset 0 0.86em 0 rgba(252, 150, 0, 0.5),
 				inset -0.86em 0 0 rgba(0, 255, 0, 0.5),	
 				inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);
 }
 .circle:before, .circle:after {
     border-radius: 100%;
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: inherit;
     height: inherit;
     box-shadow: inset 9.6em 0 0 rgba(30, 140, 209, 0.2), 
		      inset 0 9.6em 0 rgba(30, 140, 209, 0.2), 
		      inset -9.6em 0 0 rgba(30, 140, 209, 0.2), 
		      inset 0 -9.6em 0 rgba(30, 140, 209, 0.2);
     -webkit-transition: box-shadow 0.75s;
     -moz-transition: box-shadow 0.75s;
     -ms-transition: box-shadow 0.75s;
     transition: box-shadow 0.75s;
 }

把鼠标放上去，看看效果