CSS巧用：before和：after

CSS巧用：before和：after
CSS中有两个特别值得重视的伪元素，它们是：:before，:after。

然而，我们不仅要知道它们是如何使用的，还要知道如何巧用它们。

什么是:before和:after？该如何使用他们
:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。

:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。

通过一个简单例子来熟悉一下他们的使用：
<p>"ello Worl"</p>
<style>
p:before{
content:"H";
}
p:after{
content:"d";
}
</style>
好了，上面代码，估计大家都知道输出什么结果，对的，“Hello World”。

p标签内部的内容的前面会被插入一个:before伪元素，该伪元素内包含的内容是"H"；而在p标签内的内容后面会被插入一
个:after伪元素，该元素包含的内容是"d"。

作为一只合格的程序猴子，捍卫"Hello World"的完整存在是必要的。

下在我们来看看如何巧用它们，通过展示两个例子就明白了。

实例一：如何写个语音框样式？
CSS将元素宽和高设为0，用设置border的大小来实现三角图形，听过吧？呵呵，估计大伙都这么干过吧，下面我就用这种方式来实现图形。

<div class="test-div"></div>
是的，能过两伪元素，建立两个三边透明一边有颜色的形状，本质上是一个三角形状，然后能过定位实现我们所要的效果。

结果是这样的：
总结一下：赞。

实例二：实现一个内容的半透明背景层
比如我们的需求是做一个半透明的登录框。

怎么实现，先思考几秒，......。

时间到，看代码：
亲爱的，看懂了吗？没错，很简单，before元素做成了一个背景而存在。

背景是透明的，通过z-index将他放在元素的下面。

结果是这样的：
总结一下：赞赞
伪元素的应用实质，只要牢牢记住，定义结构和内容，定位置，分层次显示。

今后碰到其它类似的问题也就很轻松搞定了。

思考比勤奋更重要。