关于 ':before' 和 ':after' 伪元素

标准参考

关于 ':before' 和 ':after' 伪元素

':before' 和 ':after' 伪元素用来在一个元素的内容以前或以后插入生成的内容。

关于 ‘:before’ 和 ‘:after’ 伪元素的详细信息，请参考 CSS2.1 规范 5.12.3 The :before and :after pseudo-elements 和 12.1 The :before and :after pseudo-elements 中的内容。

问题描述

CSS 2.1 规范中描述的 ':before' 和 ':after' 伪元素，在 CSS 1 历史规范中均无规定，这致使早期版本的浏览器，如：IE6 IE7 IE8(Q) 不支持他们。

形成的影响

使用了 ':before' 和 ':after' 伪元素，可能会使页面在 IE6 IE7 IE8(Q) 中的效果不尽人意。

受影响的浏览器

IE6 IE7 IE8(Q)

问题分析

对于此问题，咱们经过如下的测试用例来讲明。

分析如下代码：

<style type="text/css">
  p:before {
    content: "before";
  }
  p:after {
    content: "after";
  }
</style>
<p> Aloha! </p>

• 在 P 元素中 "Aloha！" 的前面和后面都用伪类添加了新的文本。

根据 CSS2.1 规范中的描述可知，最终页面上显示的文本应该是 'before Aloha! after'。

这段代码在不一样的浏览器环境中的表现：

IE6 IE7 IE8(Q)	IE8(S) Firefox Opera Safari Chrome

因此对于 ':before' 和 ':after' 伪元素的支持状况，以下表：

IE6	IE7	IE8(Q)	IE8(S)	Firefox	Safari	Opera	Chrome
N	N	N	Y	Y	Y	Y	Y

【注】：实际中其余除经常使用 HTML 标记一样适用于次例，并不是仅 P 标记自身不支持。

解决方案

使用 JavaScript 或 jQuery 的 Pseudo Plugin 插件来模拟 ':before' 及 ':after' 伪元素的效果。

• 使用 JavaScript 判断 IE6 IE7 IE8(Q) 并在其中经过脚本实现 ':before' 及 ':after' 伪元素的效果；
• 使用 jQuery 的插件 Pseudo Plugin，该组件利用 IE 特有的 CSS 行为（behavior）及 CSS 表达式来模拟 ':before' 及 ':after' 伪元素的效果。