CSS玩转伪元素

伪类大家可能都不陌生，例如大家熟悉的:hover, :link等等，伪类是用来指定一个或者与其相关的选择符的状态。那么有多少人知道伪元素是干嘛的呢？ 我会给大家详细介绍伪类中的:before， :after， 并带大家使用伪类来制作上面这张图片。

所谓伪元素，就是本身不存在的页面元素，HTML代码里并没有这样的元素。但在页面显示时，你却能看到这些本来不存在的元素发挥着作用。它会改变页面的渲染树，但是不会给页面的DOM树添加任何只用于展示的DOM。

可能大家已经开始困惑了，什么是无用的DOM，为什么不存在的元素却能够让显示发生变化。OK，我们先从用法开始讲起。

:before， :after用法十分简单，它的作用是在元素前后插入新的内容，必须有content属性，外加一些样式。比如：

    div:before {
        content: open-quote;
    }
    div:after {
        content: open-quote;
    }

    <div>This is Alex</div>

你会看到“This is Alex”，前后两个引号就是通过before和after添加上去的，如果你审查元素，你会发现DOM中找不到这两个引号的HTML。

伪元素一般用于改变它们的前景颜色，增加背景色/图，调整字体大小，调整对齐方式等等。那么对于上图而言，我们可以采用两种方式实现：

• 使用两个div，一个放背景图，一个放黑色背景，然后让两个重叠，产生这种效果
• 使用一个黑色背景，然后使用伪元素，把图片背景添加上去

如果你能还不能知道如何使用着两种方案实现这样的效果，可以参考我的做法。 对于这两种方案，你是否有自己的看法呢，很明显，第一种做法会有一些没有意义的HTML，像这种时候，我们就该考虑使用伪元素啦。