本文章专门学习：after before
先上总结：
伪元素可以随便用，因为它不干扰正常的页面元素。
伪元素主要是用来实现一些华丽叼炸天的显示效果，而不是页面布局，当然
after+content可以清除页面浮动.感觉伪元素的用途其实比较的成熟或者固定，创新的用法通常正常人很难想出来，个人觉得只需要熟悉那些情景可以用，怎么用就可以。
之前一直傻傻分不清什么是伪元素，什么是伪类。
伪元素 :after,:before
伪类 :hover :active
到底什么是伪元素
1.他们是假的元素，不存在的元素，更不是隐藏的元素
2.伪元素将会在内容元素的前后插入额外的元素，因此当我们添加它们时，使用以下的标记方式，他们在技术上是平等的。简单用法
:before This the main content.:after
在引用的之前和之后分别添加添加一个引号。
blockquote:before { content: open-quote;}blockquote:after { content: close-quote;} 伪元素也有样式
很搞笑的是，伪元素虽然很伪，但是却可以正常的设置样式（背景、文本大小），丫的页面上却什么都看不出。
blockquote:before { content: open-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: left; position: relative; top: 30px; }blockquote:after { content: close-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: right; position: relative; bottom: 40px;} 问题是：它能干嘛？
关联背景图片
blockquote:before { content: " "; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; float: left; position: relative; top: 30px; border-radius: 25px; background: url(images/quotationmark.png) -3px -3px #ddd; display: block; height: 25px; width: 25px;}blockquote:after { content: " "; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; float: right; position: relative; bottom: 40px; border-radius: 25px; background: url(images/quotationmark.png) -1px -32px #ddd; display: block; height: 25px; width: 25px;} 结合伪类
blockquote:hover:after, blockquote:hover:before { background-color: #555;} 添加过渡效果
transition: all 350ms;-o-transition: all 350ms;-moz-transition: all 350ms;-webkit-transition: all 350ms;
三个酷到爆炸的DEMO
当然这里面需要一个重要的CSS3属性：box-shadow