学习使用：before和：after伪元素

　　（此文没有门槛，浅显易懂，适合新手入门）

　　以前觉得伪元类选择器用的很少，因此没怎么关注，如今发现：before和：after伪元素已经在前端开发中得到了至关多的关注，因此来研究一下，加深印象。

　　尽管css 规范中包含其余的伪元素，可是目前咱们焦点是 :before 和 :after。所以，为了简便起见，我所说的“伪元素”泛指这两个特别的伪元素。

伪元素能作什么呢？

　　“伪元素”，顾名思义。它建立了一个虚假的元素，并插入到目标元素内容以前或以后。由于在文档中它不实际改变什么。相反的，它们是像幽灵通常的元素插入在css中，他们对用户是可见的，能够经过css控制。

基本语法

　　:before 和 :after 伪元素编码很是简单(和大多数的css属性同样不须要一大堆的前缀)。这里是一个简单的例子。

#example:before {
  content: "#";
}

#example:after {
  content: ".";
}    

　　这个例子中提到了两件事情。一，咱们用#example:before和#example:after来目标锁定相同的元素.严格的说，在代码中他们是伪元素；二，在内容模块中提到，伪元素若是没有设置“content”属性，伪元素是无用的。

　　在这个例子中，拥有属性id的元素将有一个哈希符号放置内容以前，和一个句号在内容以后。

语法笔记

　　你能够设置content属性值为空，而且仅仅把他当作一个内容不多的盒子。像这样:

#example:before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
}

　　然而，你不能够彻底的移除content属性，若是你移除了，伪元素将不会起做用。至少，content属性须要空引用做为它的值(即:content:“”)。

　　你也许注意到，你也能够用两个冒号(::before 和 ::after) 写伪元素，简短的解释是，对于这两种语法没有什么不一样，仅仅一点的不一样是，伪元素(双冒号)，css3中的伪类是（单冒号）。

插入内容的特色

　　插入的元素在默认状况下是内联元素（或者，在html5中，在文本语义的类别里）。所以，为了给插入的元素赋予高度，填充，边距等等，你一般必须显式地定义它是一个块级元素。还要注意的是典型的CSS继承规则适用于插入的元素。例如，你有字体系列黑体，宋体，无衬线字体应用到body元素里，而后伪元素会像其余元素同样继承这些字体系列。一样的，伪元素不会继承没有天然继承自父元素(如 padding and margins)的样式。

以前或以后是什么？

　　咱们的直觉是：before和：after伪元素多是 插入的内容会被注入到目标元素的前或后注入。可是，不是这样的。注入的内容将是有关联的目标元素的子元素，但它会被置于这个元素的任何内容的“前”或“后”。为了证实这一点，看看下面的代码。首先，在HTML：

<p class="box">Other content.</p>

　　下面是插入伪元素的css：

p.box {
        width: 300px;
        border: solid 1px black;
        padding: 20px;
      }
      
      p.box:before {
        content: "#";
        border: solid 1px black;
        padding: 2px;
        margin: 0 10px 0 0;
      } 

　　在这个例子中，它是一个散列符号插入到该段内容以前，而不是p元素以前。效果以下：

            

插入非文本内容

　　我简要的提醒，你能够把属性的值置为空字符串或是插入文本内容。首先，你能够包含一个指向一个图像的URL

p:before {
        content: url(img/3n.png);
      }

　　注意不能使用引号。若是你将URL用引号括起来，那么它会变成一个字符串和插入文本“url(image.jpg)”做为其内容，插入的而不是图像自己。固然，你能够包含一个Data URL代替图像引用，正如你能够用css背景同样。效果以下：

　　　　

可怕的浏览器兼容性

　　任何前端技术的发展势头，第一个问题就是浏览器的支持。在这种状况之下，它不是个很大的问题。浏览器支持:before 和 :after 伪元素栈，像这样：

•  Chrome 2+,
•  Firefox 3.5+ (3.0 had partial support),
•  Safari 1.3+,
•  Opera 9.2+,
•  IE8+ (with some minor bugs),
•  几乎全部的移动浏览器。

伪元素不是决定性的

　　幸运的是，缺乏伪元素不会形成大问题。大多数状况下，伪元素通常修饰（或者帮助）内容，不会给不支持的浏览器形成问题。因此，若是你的支持者具备较高的IE版本，你仍然能够在某种程度上使用它们。