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将他放在元素的下面。

结果是这样的：

总结一下：赞赞！！！

伪元素的应用实质，只要牢牢记住，定义结构和内容，定位置，分层次显示。今后碰到其它类似的问题也就很轻松搞定了。

思考比勤奋更重要。