伪元素能做什么？
伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后。
单词“pseudo”是希腊语的英译，它的基本意思是“说谎的，不诚实的，错误的。”因此叫伪元素是适合的。因为在文档中它不实际改变什么。相反的，它们是像幽灵一般的元素插入在css中，他们对用户是可见的，可以通过css控制。
基本语法
:before和:after伪元素编码非常简单。例子：
<pre>
.example: before{
content: "#";
}
.example:after{
content: "。";
</pre>
这个例子中提到了两件事情，第一，我们用.example:before和.example:after来目标锁定相同的元素.严格的说，在代码中他们是伪元素。
第二，伪元素如果没有设置“content”属性，伪元素是无用的。
语法笔记
你可以设置content属性值为空，并且仅仅把他当作一个内容很少的盒子。像这样：
<pre>
.example :before{
content: "";
display:block;//默认是inline
width:100px;
height:100px;
background-color:yellow
}</pre>
然而，你不可以完全的移除content属性，如果你移除了，伪元素将不会起作用。至少，content属性需要空引用作为它的值(即:content:“”)。
插入内容的特点
插入的内容在页面的源码里是不可见的。只能在css里可见
同时，插入的元素在默认情况下是内联元素
之前和之后是什么？
你的直觉是：before和：after伪元素可能是 插入的内容会被注入到目标元素的前或后注入。但是，正如上面提到的，不是这样的
注入的内容将是有关联的目标元素的子元素，但它会被置于这个元素的任何内容的“前”或“后”。
插入非文本内容
我简要的提醒，你可以把属性的值置为空字符串或是插入文本内容。你基本上有属性的值要包含什么的两个额外的选择
首先，你可以包含一个指向一个图像的URL，就像在css里包含一个背景图像一样做你能做的
<pre>
p:before {
content: url(image.jpg);
}
</pre>
注意不能使用引号。如果你将URL用引号括起来，那么它会变成一个字符串和插入文本“url(image.jpg)”作为其内容，插入的而不是图像本身。
一些提醒
伪元素不会出现在DOM中。这些元素不是真正的元素。因此，它们不是可用的。所以，不要使用伪元素生成内容，是您的网页的可用性和可访问性的关键。
文档参考自w3cplus.com
