基本概念
1.他们都是CSS伪元素，与:hover/:active等伪类不一样。
2.:before/:after伪元素是在CSS2中提出来的，所以兼容性可能到IE8了。
3.::before/::after是CSS3中的写法，为了将伪类和伪元素区分开。但是平时为了兼容性，还是会用一个冒号的写法。
基本用法
p:after{} img:before{}1212这两个伪类下特有的属性 content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。比较有用的是以下几个值：
[String] – 使用引号包括一段字符串，将会向元素内容中添加字符串。示例：
a:after { content: "↗"; }attr() – 调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例：
a:after { content:"(" attr(href) ")"; }url() / uri() – 用于引用媒体文件。示例：
h1::before { content: url(logo.png); }counter() – 调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例：
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }
进阶用法
我们最常用的就是用来清除浮动和制作三角之类的特殊元素了。
现在大家常用的清除浮动的方法：
.clearfix {*zoom: 1;}.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}.clearfix:after {clear: both;}123123制作三角的方法：
.c-main:before{ content: ''; border-top: 9px solid transparent;/*方框上部分背景颜色为透明*/
border-bottom: 9px solid transparent;/*方框下部分背景为透明*/
border-right: 9px solid #eee;/*箭头背景颜色*/
position: absolute;/*绝对定位1*/
top: 25px;/*距离顶部位置偏移量2*/
left: -9px;/*距离左边位置偏移量3*/ /*123都是控制显示位置的*/
}
.c-main:after{ content: ''; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 7px solid #fbfdfb;/*箭头背景颜色，覆盖前面的#eee颜色，使其颜色与整体颜色一致*/
position: absolute; top: 27px; left: -7px; }12345678910111213141516171819201234567891011121314151617181920定位都是其次的，主要是看border设置。一边有颜色，其他三边透明就可以实现。
参考文章：
http://blog.dimpurr.com/css-before-after/
