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

第一，“伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后。
第二，在内容模块中提到，伪元素如果没有设置“content”属性，伪元素是无用的。
插入非文本内容
我简要的提醒，你可以把属性的值置为空字符串或是插入文本内容。你基本上有属性的值要包含什么的两个额外的选择
首先，你可以包含一个指向一个图像的URL，就像在css里包含一个背景图像一样做你能做的

p:before {
  content: url(image.jpg);
}   

插入内容的特点
正如前面提及的，插入的内容在页面的源码里是不可见的。只能在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版本，你仍然可以在某种程度上使用它们。

参考链接：http://www.w3cplus.com/css3/learning-to-use-the-before-and-after-pseudo-elements-in-css.html