1、定义：
“伪元素”，顾名思义。就是它创建了一个虚假的元素，并且将其虚假的元素插入到目标元素的内容之前或之后。
2：特点：
a、它在实际文档中不改变什么，但是对用户可见，可以通过css控制，源码中看不到
b、伪元素如果没有设置“content”属性，伪元素是无用的。
你可以设置content属性值为空，并且仅仅把他当做一个内容很少的盒子，例如
#example:before { ????content: ""; ????display: block; ????width: 100px; ????height: 100px; ??} ?然而，你不可以完全的移除content属性，如果你移除了，伪元素将不会起作用。至少，content属性需要空引用作为它的值(即:content:“”)。
c、插入的内容在页面的源码里是不可见的。只能在css里可见
同时，插入的元素在默认情况下是内联元素（或者，在html5中，在文本语义的类别里）。因此，为了给插入的元素赋予高度，填充，边距等等，你通常必须显式地定义它是一个块级元素。
d、注入的内容将是有关联的目标元素的子元素，但它会被置于这个元素的任何内容的“前”或“后”。（切记不是元素的前和后）
e、content属性的值，置为空字符串或是插入文本内容，还有额外的选择
首先，你可以包含一个指向一个图像的URL，就像在css里包含一个背景图像一样
p:before { ????content: url(image.jpg); ??} ?注意不能使用引号。如果你将URL用引号括起来，那么它会变成一个字符串和插入文本“url(image.jpg)”作为其内容，插入的而不是图像本身。
当然，你可以包含一个Data URI代替图像引用，正如你可以用css背景一样。
你还可以选择ATRR(X)中的函数的形式。此功能，“把X属性的值以字符串的形式返回”
a:after { ????content: attr(href); ??} ?attr（）函数的功能是什么？它得到特定属性的值并把它作为插入的文本成为一个伪元素。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css-jiaocheng/tc50528.shtml
CSS中的before和:after伪元素深入理解
原文地址：https://www.cnblogs.com/gopark/p/10204668.html