大家可能对伪类和伪元素有点迷糊，在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。
这里整理总结下：
有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。
#id:after{
}
#id::after{
}
单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。
所以，如果你的网站只需要兼容 webkit、firefox、opera 等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。
更加具体的信息，可以看看 MDN 对伪类和伪元素的理解。
本文的主角就是伪元素 before 和 after ，下面将具体讲讲这两个伪元素的魅力。
1、利用 after 清除浮动
这个估计是前端都知道，运用 after 伪元素清除页面浮动，不做过多解释。
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
2、伪元素与 css sprites 雪碧图
这个也是老姿势了。雪碧图大家应该也不陌生，通过将多个图片 icon 合为一张图，从而为了减少 http 请求，很多网站对雪碧图的需求还是很大的。
但是在制作雪碧图的过程中，或者现在很多的打包工具自动生成的雪碧图，都存在着需要为每个 icon 需要预留多少边距的问题。看看下图：
–>
譬如上面这种情况（假设按钮中的图标是采用了雪碧图），产品某天突然要求按钮从状态左变为状态右，那么雪碧图原先预留的位置边距肯定就不够了，导致其他图形出现在按钮中。
而我们通常不会为了一个小 icon 多添加一个标签（不符合语义化）。
所以通常这种情况需要用到雪碧图的话，都是在按钮中设置一个伪元素，将伪元素的高宽设置为原本 icon 的大小，再利用绝对定位定位到需要的地方，这样无论雪碧图每个 icon 的边距是多少，都能够完美适应。
3、作为列表序号
怎样作为列表序号呢？我先举个栗子~
像这样的1,2,3的序号一般大家是怎样做的呢？用span？用图片？是不是用了span后还要进行定位？是不是很麻烦呢？
现在我们可以用伪元素来做列表序号，而且列表的一项删除了以后，其他的列表序号会自动改变，成为一个有顺序的列表是不是很方便！
ul{ 1000px; margin: 0 auto; counter-reset:li; } li{ list-style: none; } ul>li{ margin-top: 10px; } ul>li:before{ content: counter(li); counter-increment:li; padding: 0 5px; color: #fff; margin-right: 10px; }
超链接特效
举例：配合 CSS定位实现一个鼠标移上去，超链接出现方括号的效果
a { position: relative; display: inline-block; outline: none; color: #fff; text-decoration: none; font-size: 32px; padding: 5px 20px; } a:hover::before, a:hover::after { position: absolute; } a:hover::before { content: "5B"; left: -10px; } a:hover::after { content: "5D"; right: -10px; }</style><a>鼠标移上去出现方括号</a>
制作图案
用这两个伪类，可以实现需要简单的图标，例如搜索的放大镜，叉叉，箭头等等
请欣赏：http://chokcoco.github.io/magicCss/html/index.html
扩大可点区域
当主元素实在没办法扩大自身的时候，可以利用:before, :after来实现可点区域的扩大，伪元素属于主元素，点伪元素就是点击主元素。
//利用这个样式可以把可点区域扩大为40px宽，高度原理一样
&:before { content: ""; display: block; position: absolute; 40px； left: 50%; margin-left: -20px; top: 0; height: 50px; //随便 }
伪元素实现换行，替代<br>换行标签
大家都知道，而行级元素则不会自动换行。但在项目中，有需求是需要让行级元素也自动换行的，通常这种情况，我都是用换行标签解决。而 《CSS SECRET》 中对标签的描述是，这种方法不仅在可维护性方面是一种糟糕的实践，而且污染了结构层的代码。
运用 after 伪元素，可以有一种非常优雅的解决方案：
.inline-element::after{ content: "A"; white-space: pre; }
通过给元素的 after 伪元素添加 content 为 “A” 的值。这里 A 是什么呢？
有一个 Unicode 字符是专门代表换行符的：0x000A 。 在 CSS 中，这个字符可以写作 “00A”， 或简化为 “A”。这里我们用它来作为 ::after 伪元素的内容。也就是在元素末尾添加了一个换行符的意思。
而 white-space: pre; 的作用是保留元素后面的空白符和换行符，结合两者，就可以轻松实现在行内级元素末尾实现换行。