在网页设计的道路上，:before与:after伪元素已经在前端开发中获得了越来越多的关注，清除浮动，创建GUI图标等的运用也日益普遍。本文收集了一些在伪元素下运行的内容，尽管css规范中包含其他伪元素，但我们的焦点是:before与:after，因此文章所说的伪元素就只指代这两个特别的伪元素。
1、伪元素能做什么？
“伪元素”，顾名思义，它创建了一个虚假的元素，并插入到目标元素之前或之后。它在文档中不实际改变什么，相反，它们一般插入在css中，对用户是可见的，可以通过css控制。
2、基本语法
伪元素实际上在css1中就已经存在了，但我们讨论的:before与:after则发布于css2.1中。在最初，伪元素的语法是使用“:”（一个冒号），随着web的发展，在css3中修订后的伪元素使用“::”（两个冒号），也就是::before与::after以区分为元素和伪类（例如:hover,:active等）。考虑到浏览器兼容性（IE8只支持单冒号），普遍还是使用单冒号。
:before与:after伪元素编码非常简单，和大多数css属性一样不需要一大堆的前缀，如下例：
本例中需要注意两点：
a. 如果伪元素没有设置"content"属性，那么伪元素是无用的；
b. 我们用#test:before与#test:after来锁定相同的目标元素，严格的说，在代码中它们就是伪元素。
在这个例子中，拥有id属性为test的元素将有一个“#”放置在内容之前，和一个“.”在内容之后。
你也可以设置content属性值为空，并且仅仅把它当做一个内容很少的盒子，如下例：
然而，你不可以完全移除content属性，如果移除了，伪元素将不起作用，因为content属性需要空引用作为它的值。
就语法而言，从技术角度来说，你可以普遍的应用伪元素，而不仅仅是放在特殊的元素上，如下例：
虽然上面是有效的，但是没有实际用处。代码会在DOM里每个元素的内容之前插入“#”符号。即使你删除了<body>标签和它里面的所有内容，你仍会看到在页面上有两个“#”符号，一个在<html>里，另一个在<body>里，浏览器会自动创建。
3、插入的内容
通过伪元素插入的内容，在页面源码里是看不到的，只能在css里面查看。并且插入的内容默认情况下是内联元素，所以为了给插入的内容赋予宽高度、填充、边距等，通常必须显式的定义它为一个块级元素。
典型的css继承适用于插入的元素。例如，body定义了不同样式的字体，那伪元素会像其他元素一样继承这些字体样式。
同样，伪元素不会继承没有自然继承自父元素（如padding，margin）的样式。
4、关于之前或之后
直觉告诉我们:before与:after插入的内容会被注入到目标元素的前后，但是事实上却不是这样，注入的内容作为目标元素的子元素，会被放置在目标元素的内容的前或后。如下例：
html：
css：
浏览器显示结果：
加入伪元素：
浏览器显示结果：
将伪元素内容设置为块级元素（display:block;）后浏览器显示结果：
由结果可知，不是插入“before”到段落P之前，而是将内容放置在P内容之前。
5、插入非文本内容
我们也可以用图片替换内容而不是只有纯文本。content属性提供了url()来插入图片，但是在更多的实例中，我更倾向于使用背景(background)属性从而能更好的控制图片。
首先是url():
浏览器显示结果：
注意不能使用引号。如果你将URL用引号括起来，那么它会变成一个字符串和插入文本“url(img/mark.png)”作为其内容，插入的而不是图像本身。
使用background:
html:
css:
浏览器显示结果：
然而，正如你能够从上面的代码片段中看到的，我们仍旧声明了content属性，而且此时也使用了空字符串。content属性是必须的而且应该经常被应用。否则，伪元素无论如何都无法正常工作。
6、伪元素的其他应用
a. 结合伪类
尽管有不同类型的伪X（伪元素、伪类），我们可以使用伪类连同伪元素一起放入一个css规则中，例如，如果我们希望当我们的鼠标移到blockimg上时，内容的背景色能够变为红色。
b. 添加过渡效果
可以在伪元素上应用transition属性来创建有没的颜色过渡效果。
c. 阴影效果
使用伪元素:before与:after，它们两个都是绝对定位，并且使用负的z-index值放置到图片后方实现阴影效果。
3D按钮
这是一个非常聪明的实现，利用伪元素结合CSS3 box-shadow 来绘制一个令人吃惊的3D按钮，仅仅使用了CSS和单一的锚文本。伪元素:before 被用来在按钮的左侧添加数字“1”。
叠加图像效果
使用伪元素来仅仅依靠一个图片标签创建一个“凌乱的”叠加图像效果也是可能的。伪元素用于建立一个图片叠加的错觉，通过使用z-index负值使“叠加”的图片在真正的图片后面来实现。
伪元素很酷同时也是可应用到实际工作中的，基本上，每一个我们所添加的元素都不会干扰现有的HTML结构，而且伪元素可以做到 几乎所有我们能想到的事情。实际上有一些伪元素的改进工作,目前逐步进行，比如伪元素嵌套div::before::before { content: ”; }以及多重伪元素div::before(3) { content: ”; }。很显然，在未来的web设计中，这些改进会让我们的设计有更多的形式（更多的可能性）。然而，他们将会在最新的浏览器中得到支持。
7、兼容性
任何前端技术的发展势头，第一个问题就是浏览器的支持。在这种情况之下，它不是个很大的问题。
浏览器支持:before 和 :after 伪元素栈，像这样：
* Chrome 2+,
* Firefox 3.5+ (3.0 had partial support),
* Safari 1.3+,
* Opera 9.2+,
* IE8+ (with some minor bugs),
* 几乎所有的移动浏览器。
唯一真正的问题是没有获得支持的（不用奇怪）IE6和IE7。所以，如果你的爱好者是在良好合适的web开发（或者其他具有较低IE版本的市场），你可以继续自由地使用伪元素。幸运的是，缺少伪元素不会造成大问题。大多数情况下，伪元素一般修饰（或者帮助）内容，不会给不支持的浏览器造成问题。所以，如果你的支持者具有较高的IE版本，你仍然可以在某种程度上使用它们。
正如前面提到的，伪元素不会出现在DOM中。这些元素不是真正的元素。因此，它们不是可用的。所以，不要使用伪元素生成内容，是您的网页的可用性和可访问性的关键。
另外一件需要记住的是，开发工具，例如火狐，不要用伪元素显示内容。所以，如果使用了，伪元素会造成难以维护和调试缓慢。
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
