我最近阅读了很多关于字体图标的内容，几乎我看到的每个网站都使用:before和:after伪元素与content属性结合将字体图标插入 DOM。
但是，我没有看到将这些伪元素用于字体图标的优势。事实上，我觉得使用它们有两个很大的缺点： IE7:before及:after以下不支持，使用它们可能很难定位内容。
因此，我的问题是：为什么要使用:before并且:after根本将字体图标插入到 DOM 中？我在想这可能与屏幕阅读器有关，但如今，所有字体图标服务（如 IcoMoon）似乎都将字体图标分配给 Unicode PUA（私人使用区域）中的代码点，其中（据我所知)，无论如何屏幕阅读器都不会大声朗读。
对我来说，使用 HTML 实体（如.
换个说法：大多数人使用字体图标:before的具体原因是什么？:after非常感谢你。
这是一个相当理论上的差异。
这个想法是生成的内容不被视为文档的一部分，并且没有语义价值。处理页面内容的代理应该忽略它，例如搜索引擎和音频页面阅读器（真正的屏幕阅读器实际上所做的不一定总是那么干净，但那是另一回事了）。
这使它非常适合您想要添加没有语义内容的视觉装饰的时候，这是对图标字体的正确使用。这与使用背景图像突出显示项目或使用alt="".
如果你只是在一个页面上写，那么理论上它确实有语义内容......只是没有任何明确定义的语义内容，它是“奇怪的未知字符”。尽管它不应该意味着任何东西，但它可能对特定的社区有用（U+E000 可能被认为是符文或 Tux 的图片）并且因此可能会被某些工具不当对待。
（这一切都失败了，人们确实使用图标字体而不是装饰，以表示文档内容没有赋予的有意义的区别。而且由于 FontAwesome 自己的示例页面包含这种无法访问的滥用，人们这样做也就不足为奇了网页设计师是视觉动物，你可以引导他们使用适合语义的工具，但不能让他们进行语义思考。）