今年夏天我将做一些关于伪元素及其所有巧妙用法的演讲。关于它们的一个很酷的事情是，浏览器的支持实际上非常好——比一些 CSS3 功能好得多。事实上，您可以用它们复制一些 CSS3 功能（例如 多个背景，有点像）
我想制作一个浏览器兼容性图表，以便非常清楚地了解如果使用伪元素 :before 和 :after 会获得什么样的支持。我的研究主要基于这个 快速演示页面。我在自己可以运行的浏览器中查看了该页面，通过 BrowserShots 运行它，最后查看了旧版浏览器的文档。
|
3.5 及以上 | 支持 额外：Firefox 4 可以对它们进行过渡 |
|---|---|---|
| 3.0 及以下 | 部分支持 不支持元素上的定位或浮动。 |
|
|
已测试：4 及以上 显然：1.3 及以上 |
支持 |
|
所有版本 | 支持 |
|
6（文档）及以上 | 支持 |
|
9 及以上 | 支持 |
| 8 | 部分支持 不尊重 z-index，必须使用文档类型声明，如果使用 :hover:after/:hover:before 则必须声明 :hover 状态 |
|
| 7 及以下 | 不支持 |
支持级别
让我们获取三个不同的数据来源。列出的百分比是根据（2011 年 6 月）过去一个月的访客计算得出的，方法是将支持伪元素的每个浏览器版本的每个版本的访客百分比加起来。
| W3Schools 浏览器使用数据 | 91.9% |
| CSS-Tricks（通过我的 Google Analytics） | 97% |
| StatCounter | 84.8% |
需要更新…
如果有人可以访问旧版浏览器并进行测试，那就太好了。
- 我只证明了 Safari 4+ 可以工作，但看到了 1.3+ 支持它们的文档。
- 我只证明了 Opera 7+ 可以工作，但看到了 6 支持它们的文档。可能会更早。
- 任何其他尚未提及的怪癖…
感谢分享。我真的很喜欢 CSS 的这个特性，并且以我认为非常酷的方式使用它来编写非常语义化的代码。
我想用逗号分隔列表，并在列表末尾加上句点。HTML 中的列表应格式化为带有 li 子元素的 ul 或 ol。我使用 :after 伪类完成了这两项操作
ul li:after { content: “, “; display: inline; padding-right: 5px; }
ul li:last-child:after { content: “.”; }
您可以在此处查看其运行情况
http://u.milesplit.com/meets/78374
:before / :after 和 ::before / ::after 有什么区别？
我不知道从哪里得到双冒号的，但它在我的网站上仍然运行良好。我已经将我的代码更改为标准的 :before 和 :after，但我很好奇为什么它之前没有出错。
好问题。
双冒号是官方的用法。它用于区分伪元素和伪选择器。例如，当您向页面添加不存在的内容或选择不是“真实”HTML 元素的内容时。
问题是 IE 8（我认为）忽略双冒号选择器，因此您必须使用单冒号才能使其工作。所有浏览器也支持单冒号，因此最好只使用单冒号。
在 CSS 3 之前，单冒号用于伪元素和伪选择器。CSS 3 使用双冒号和单冒号来区分两者。双冒号用于伪元素，单冒号用于伪选择器。
Louis Lazaris 有一篇关于双冒号和单冒号用法的优秀文章。http://www.impressivewebs.com/before-after-css3/
如果您阅读该文章的评论，Stephen 发布了一个关于伪元素和伪选择器之间区别的很好的示例。
我最近一直在更多地研究伪元素，这个图表是一个很棒的发现！
你们可能对 Luke Lutman 的这个 jQuery 插件感兴趣，它应该在 IE 中“支持” :before 和 :after。
我还没有测试过，所以我不能保证它，但也许这可以修补 IE 7 中的用法。
IE7 确实是我在商业网站中使用伪元素的唯一障碍。
我很好奇是否有人对 IE 7 中伪元素的优雅降级有任何建议？
哈！所以我用双冒号是对的，我会改回它。感谢大家的评论。
我不明白为什么双冒号格式甚至存在。我们为什么*需要*区分伪元素和伪选择器？
只是想提一下，WebKit 中的伪元素不支持 CSS 过渡，而 Firefox 4 中则支持。不过，我从 1 月份起就没有真正检查过，所以情况可能已经发生了变化。
抢先一步！
WebKit 仍然不支持此功能。我希望他们尽快实施，因为它允许您做一些非常巧妙的事情，例如在一个元素上淡入淡出多个背景图像等。
正确。只有 Firefox 4。不过，所有其他浏览器的错误都已提交。我几乎觉得它严重到足以列出“部分支持”，但目前，我将其列为 Firefox 4 的额外功能。
谢谢。我一直想知道为什么 CSS 过渡在 WebKit 浏览器上不起作用。
此外，是否仍然无法转换 CSS 渐变？
其他奇怪的事情——CSS 旋转元素在 iPhone 上看起来参差不齐或有锯齿，但在 Safari 中则正常。
将文本阴影应用于文本（显然）时，Chrome 11.x for Mac 中的字体显得更细。
您可以转换 background-position，如果它是渐变，则它是 background-image，因此您至少可以将其移动。我不确定是否可以转换使用的颜色。制作一个简化的测试用例！
只是好奇……为什么我们需要测试如此旧的浏览器？真的还有人在使用 Safari 1.0 吗？
可能没有，但我真的很喜欢养成非常具体地说明事物浏览器支持的习惯。当您撰写博文或谈论某些内容并只是说“在现代浏览器中有效”时，这对我们并没有什么帮助。
是的，Opera 现在可以处理渐变，但只有线性渐变，并且仅在 11.10 版本中非常具体地支持，并且仅使用供应商前缀。这是一种很多内部知识，网页设计师应该了解并随时了解。
它也使资源更持久。下次您需要了解伪元素的浏览器支持时，您会去哪里？=)
我很高兴这些伪元素有很好的支持，因为我已经在我的网站中使用它们来实现一些很棒的效果。
我使用它们的一种方式是作为图像悬停。
我有几个大小相同的图像，它们包装在锚标记中。然后我用以下方法定位锚标记
a:hover:after
每个图像都有一个包含一些文本的透明图像的悬停效果。
虽然不需要说，但“去你的 IE7！”阻止我使用这些 :(
总结很棒！有人知道是否有方法在Firebug/开发者工具等中查看伪元素生成的內容吗？前几天我遇到了其他人代码的问题，无法弄清楚某些内容来自哪里。结果发现是一个伪元素。
使用开发者工具（webkit），如果选择它们所属的元素，就可以查看和修改其CSS。但是无法直接选择伪元素。所有开发者工具项目都意识到这个类似bug的问题。
嗯，从未注意到IE7不支持它们。
幸运的是，我之前只在相对较小的网站上使用过它们，但为了给IE7用户提供一个美观的网站（我只是使用before/after伪元素在几个侧边栏添加顶部和底部图形），看起来我需要为它们提供一个不错的备份方案。
为了稍微较真一下（因为我自己经常弄错），我认为，从技术上讲，: 是伪类，:: 是伪元素。
但是，说真的……谁在乎呢。哈哈。已收藏。
是的，我在上面稍微提了一下。基本上，我建议使用单冒号，因为所有浏览器都支持它，而有些浏览器（IE 8）仅支持它。
Windows和Linux上的Firefox 4.0在:before和:after方面存在一个bug，所以目前只部分支持。
https://bugzilla.mozilla.org/show_bug.cgi?id=646053
我使用:before和:after的一个很酷的技巧是让Facebook更详细地告诉我更新发布的时间……
abbr.timestamp:before { content: attr(title) ” [“; }
abbr.timestamp:after { content:”]”; }
哇，Chris，这张图表非常实用。已收藏。现在分享给朋友们。太棒了，简直太棒了。
我有点惊讶地发现Selectivizr没有为:before和:after添加功能，但后来我读到这是因为DOM操作导致冲突(http://bit.ly/i3liNQ)
有人知道在旧版浏览器中使用:before和:after的解决方案吗？或者我们目前是否坚持渐进增强？
我检查了一些旧版浏览器，以查看它们对这些伪元素的支持情况。
Opera 3.0：不支持（实际上任何CSS都不支持）
Opera 3.6：不支持
Opera 5.02：支持:before和:after
Netscape 4.79：不支持（会崩溃）
Netscape 6.01：部分支持（p:before和p:after有效，而div:before和div:after无效——一段时间后会崩溃）
Netscape 7.01：部分支持（与6.01相同，但不会崩溃）
SeaMonkey 1.0：部分支持（与Netscape 7.01相同）
令人惊讶的是，Netscape 6.01（1998年发布）、Opera 5.02（2000年发布）和SeaMonkey 1.0（2005年发布）都支持它——即使是部分支持——而Internet Explorer 7（2006年发布）却没有。
伪元素上的CSS3过渡似乎目前只在FF4中有效……
这是一个快速演示，在悬停时为按钮添加光泽动画：http://j.mp/l70BVq
好奇是否有人有其他（更好？）的浏览器使用率资源？Chris，你在第98集的屏幕录制中提到你将更新此帖子的链接。
截至此评论日期，我已更新上述文章，列出了三个来源。
http://www.quirksmode.org/css/contents.html#t15 这是另一个有用的图表，显示了对这些::伪选择器的支持。
如何使“:after”“:before”伪选择器与IE浏览器兼容？在IE 8中它不起作用..
您好，Chris Coyier，我在IE 8中遇到了麻烦，我正在向所有锚添加“:before”伪元素，所有浏览器都完美运行，但在IE 8中不行，是否有其他更好的方法来解决这个问题。
a:before{
content: ‘+’;
background:url(‘images/bg-hover.png’) repeat left top;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
}
ie 9：元素需要有背景或内容，而不仅仅是“”。