CSS中有关这两个伪元素，是用的比较频繁的。而且它的用处较其它的伪元素还算是比较多，这里讲三个它的应用，希望能够说明白它的用法。毕竟学会用法才是我们最终的目的。
一、字母拼接：
这是最简单直接的应用了，就像在字符串"ello，worl"前后分别加个"H"和"d"，可以这么处理：
<p>ello Worl</p>
上面这个DIV加个下面这种样式：
结果就是我们想到的，输出完整的"Hello,world"。
二、层级叠加：什么叫层级叠加效果了，说直白点就是用after和before分别在一个div中定义两个伪元素模块，然后通过定位，将他们叠加在一起，形成我们想要的效果。
下面用这个思路来做一个类似的语言框，效果是这样的：
对，我们要实现的就是左边那个尖角。可以使用无宽高的单设置border来处理这种形状。
<div class="wx"></div>
样式代码是这样的：
这里需要注意的是伪元素的定位是相对于本身这个div元素来的。知道了这一点，那下面的定位背景就是同一道理了。
三、定位背景：这里同样也是通过定位来给一个div加一个透明的背景层。效果是这样的：
上图的那个白色透明层，就是我们这里要实现的效果。dom结构是这样的：
然后，我们加上伪元素的样式代码：
写在最后的总结：
伪元素的应用也许不止于这些，但是它们的使用方法我们还是可以总结的。希望这篇能让大家有点启发。
短内容，说完整事，哪怕只读一篇也能学知识。点击关注小郑搞码事，说的都是那堆代码。谢谢您的鼓励！
,
