参考：http://www.w3cplus.com/css3/learning-to-use-the-before-and-after-pseudo-elements-in-css.html
伪元素在文档中不实际改变什么，但是能插入css中，对用户可见，可通过除css控制。
基本语法：
#example:before{
content:"#";
}
#example:after{
content:"*";
}
在内容模块中，伪元素如果没有设置content属性，伪元素是无效的；
单冒号跟双冒号区别：伪元素（双冒号），css3中伪类（单冒号）；
可以设置content内容为空，当做一个无内容的盒子：
#example{
content:"";
display:block;
100px;
height:100px;
}
就语法而言，可以普遍应用伪元素，不用放在特殊元素上：示例代码：
:before{
content:"#";
}
虽然有效，但是没用，代码会在DOM每个元素内容前插入符号，即使删除了body标签和他所有的内容，仍会在页面上显示：一个在<html>里，另一个在<body>标签里。浏览器会自动创建；
插入的元素在默认情况下是内联元素，为了给它赋予高度，填充，边距，常常显示的定义它是一个块级元素；
可插入非文本内容:
a:after{
content:attr(href);
}
这会导致页面上的每一个<a>元素的href值立即被放置在每个各自的<a>元素的后面。在文档被打印时，它可以用作一个包含所有URl的打印样式表。
也可以用这个函数去获取元素的title属性，或者甚至是microdata的值。当然，并不是所有的例子都符合自己的实际，但根据不同的情况，一个特定的属性值作为一个伪元素可以是实际的；然而，获取title或者图像的alt的值并作为实际的伪元素显示在页面上是不可能的。
记住伪元素必须是被应用元素的子元素。图像，这是void(或者是空元素)，没有子元素，所以它在这个列子中不可用，同样也适用于其他空元素，例如：<input>。
伪元素不会出现在DOM中，这些元素不是真正的元素，因此他们不可用，不要用伪元素生成内容，是网页可用性和可访问性的关键。
注入的元素是有关联的目标元素的子元素，但它会被置于这个元素的任何内容的前或后，所以不是插入到此元素内部，而是被置于它的前或后。