前端培训学习css中的::after和::before已经被大量地使用在我们日常开发中了，使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解，究竟他们是做什么的？如何使用他们？什么时候应该使用他们？笔者总结了一些对伪元素的理解和使用经验。
现象：在编写本条目时，除了Opera，//www.58yuanyou.com在所有浏览器下input标签使用伪对象:before和:after都没有效果，即使Opera的表现也同样令人诧异。
1.间隔符用法
如文章最开始的例子，使用::ahgDfGVlolfter伪元素做间隔符，并使用伪类:not排除掉最后一个元素。
2.做border三角图标
很多开发者都用过border做的三角图标，本身三角符号就不属于文档，使用伪元素做三角符最合适了。
3.字符图标
最近笔者在开发微信小程序，因为微信小程序不支持svg和背景图，于是笔者大量使用字符图标，感觉字符图标非常方便，就是受设备系统字体库限制。
4.webfont的图标
现在webfont图标的最佳实践就是使用i标签和::after或者::before，实现这种图标最佳实践的工具非常多，比如http://fontello.com/，从这个网站我们可以下载svg的图标库。这种例子太多了，这里就不再列举。
5.做单位、标签、表单必填标准
笔者一直认为表单输入框的必填标记（往往是红色的“*”字符），不应该放到文档当中，使用::before可以很优雅地解决这个问题（其实就是字符图标的进一步应用）。
对于单位和前（后）置标签，也可以这样做。但是多数情况下不推荐这种做法，因为单位和标签应该是文档的一部分。
6.做一些效果
可以参考《理解伪元素 :before 和 :after》这篇文章的效果，笔者曾经在实际项目中使用过“迷人的阴影”效果，也曾在微场景开发中实现过一些类似的动画。
7.实现一些标签对placeholder的支持
只有几个标hgDfGVlol签支持placeholder，而且如<input type=’date’ />虽然是input但是也不支持。使用::before可以让一部分标签也实现对placeholder属性的支持。
8.实现文字图片居中对齐
优雅地实现张鑫旭老师的inline-box居中方法，使用一个高度为100%的::before将自身的对齐线移动到自己的中线，这样里面的所有内联元素都居中对齐了。
9.清除浮动
这个很常用，bootwww.58yuanyou.comstrap的clearfix类就是使用这个方法。
10.使用pointer-events消除伪元素事件
之前提到过，www.58yuanyou.com伪元素::after和::before会替所在元素捕获用户事件，有时候这并非我们想要的，因为这样会影响被::after和::before覆盖的子节点或者兄弟节点捕获用户事件，使用pointer-events可以消除这种问题。
