CSS中的before和:after伪元素是如何使用的呢？

“伪元素”就是它创建了一个虚假的元素，并插入到目标元素内容之前或之后。
1、:before 和 :after 伪元素编码非常简单(和大多数的css属性一样不需要一大堆的前缀)。例如：

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

·这个例子我们就可以看到第一个我们用#example:before和#example:after来目标锁定相同的元素.严格的说，在代码中他们是伪元素。
第二个就是在内容模块中提到，伪元素如果没有设置“content”属性，伪元素是无用的。
注释：拥有属性id的元素将有一个哈希符号放置内容之前，和一个句号在内容之后。
2、可以设置content属性值为空，并且仅仅把他当做一个内容很少的盒子；例如：

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

注释：你不可以完全的移除content属性，如果你移除了，伪元素将不会起作用。至少，content属性需要空引用作为它的值(即:content:“”)。
3、你也可以用两个冒号(::before 和 ::after) 写伪元素，这个我以前讨论过的。简短的解释是，对于这两种语法没有什么不同，仅仅一点的不同是，伪元素(双冒号)，css3中的伪类是（单冒号）；就从语法来说，你可以普遍的应用伪元素，不是放在特殊的元素上。例如：

:before {   
  content: "#";   
}  

注释：代码会在DOM里的每个元素的内容之前插入散列符号。即使你删除了标签和它的所有内容，你仍会在页面上看见两个散列符号：一个在里，另一个在标签里，浏览器会自动创建哪一个。
4、插入内容的特点：插入的内容在页面的源码里是不可见的。只能在css里可见，同时，插入的元素在默认情况下是内联元素（或者，在html5中，在文本语义的类别里）。因此，为了给插入的元素赋予高度，填充，边距等等，你通常必须显式地定义它是一个块级元素。
（1）还要注意的是典型的CSS继承规则适用于插入的元素。例如，你有字体系列黑体，宋体，无衬线字体应用到body元素里，然后伪元素会像其他元素一样继承这些字体系列。
（2）你的直觉是:before和:after伪元素可能是 插入的内容会被注入到目标元素的前或后注入。但是，正如上面提到的，不是这样的。
注入的内容将是有关联的目标元素的子元素，但它会被置于这个元素的任何内容的“前”或“后”。
例如在HTML中进行：

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

下来在css中插入伪元素：

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

在此html里，你所看的一段文字带有的是一个类的box，还有这样的文字“Other content”在里面（像你所会看到的一样，如果你看见了首页的源代码）。在css中，这段内容被设置了宽度，以及一些padding和可见的边框然后我们有了伪元素。在这个例子中，它是一个散列符号插入到该段内容之前。随后css给了它一个边框以及一些padding和margins。
（3）你可以把属性的值置为空字符串或是插入文本内容。你基本上有属性的值要包含什么的两个额外的选择；首先，你可以包含一个指向一个图像的URL，就像在css里包含一个背景图像一样做你能做的。

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

提醒：注意不能使用引号。如果你将URL用引号括起来，那么它会变成一个字符串和插入文本“url(image.jpg)”作为其内容，插入的而不是图像本身；当然，你可以包含一个Data URI代替图像引用，正如你可以用css背景一样。
（4）可以选择ATRR(X)中的函数的形式，把X属性的值以字符串的形式返回；例如：

a:after {   
  content: attr(href);   
}  

注释：上面的代码会导致页面上的每一个元素的href值立即被放置在每个各自的元素的后面。在文档被打印时，它可以用作一个包含所有URl的打印样式表。