理解伪元素 :before 和 :after

首先要明白一种思想：结构和样式分离。
      1. 结构和样式分离，就意味着：没有样式表，HTML文档也是一个完整的文档；没有样式表，也能正常阅读用HTML表达的所有内容。明白这种思想就能很好理解样式表中使用
      :before 和 :after中的content: ""; 就算没有它们中的content: "", HTML文档也不会受到影响，HTML文档也是一个完整的文档.

      2. 层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。
        伪元素很酷同时也是可应用到实际工作中的，基本上，每一个我们所添加的元素都不会干扰现有的HTML结构，而且伪元素可以做到 几乎所有我们能想到的事情。

      3. 事实上，的确有一些CSS家族的成员(CSS选择器)被分类为伪元素比如：:first-line, :first-letter, ::selection, :before and :after。

      4. 它是做什么的?  简而言之，伪元素将会在内容元素的前后插入额外的元素，因此当我们添加它们时，使用以下的标记方式，他们在技术上是平等的。


      所以，用简单的话来说： :before 和 :after中的content: ""; 不过是对HTML的装潢，使HTML看起来更漂亮一些。举个例子：
      HTML: <a href="#">知道更多</a>

      以上这句语句，是一个链接，点击就能打开，就算没有任何CSS修饰，也不影响打开链接。但是，如果稍微修饰，这个链接就会看起来美观一些：
      a:after { content: "\00A0\000BB"; } 加上CSS修饰后，链接看起来就美观一些


      定义和用法
        :before / :after 选择器在被选元素的内容前面 / 后面 插入内容。
        请使用 content 属性来指定要插入的内容。


      实例
        在每个 <p> 元素的内容之前插入新内容 及 内容的样式：
      p:before {
        content:"台词：-";
        background-color:yellow;
        color:red;
        font-weight:bold;
      }


      关于语法和浏览器支持

      伪元素实际上在CSS1中就存在了，但是我们现在所讨论的:before和:after则发布于CSS2.1中。在最初，伪元素的语法是使用“:”（一个冒号），随着web的发展，在CSS3中修订后的伪元素使用“::”（两个冒号），也就是::before 和 ::after—以区分伪元素和伪类（比如:hover，:active等）

      然而，使用单冒号还是双冒号都可以，但IE8只支持单冒号的格式，安全起见还是使用单冒号的格式。

      注释：对于 IE8 及更早版本中的 :before 和 :after，必须声明 <!DOCTYPE>。