css - CSS 内容属性如何工作？

Question

有人可以解释该content属性在浏览器内部是如何工作的吗？它是否会在 DOM 中创建一个新节点，即使它没有显示在 webInspector 中。它会像真正的 DOM 节点一样对内存消耗产生同样的影响吗？

Answer 1

我在CSS 2.1 规范中找到了这个

生成的内容不会改变文档树。特别是，它不会被反馈给文档语言处理器（例如，用于重新解析）。

Answer 2

来自W3C：

此属性（内容）与 :before 和 :after 伪元素一起用于在文档中生成内容。生成的内容不会改变文档树。特别是，它不会被反馈给文档语言处理器（例如，用于重新解析）。

此外，根据MDN：

使用 content 属性插入的对象是匿名替换元素。在 CSS 中，被替换元素是其表示超出 CSS 范围的元素。这些是一种外部对象，其表示独立于 CSS。典型的替换元素是<image>,或形成元素 <object>，如, 。某些元素，例如或仅在特定情况下被替换元素。使用 CSS 内容属性插入的对象是匿名替换元素。CSS 在某些情况下专门处理替换元素，例如在计算边距和一些自动值时。请注意，某些被替换的元素（但不是全部）具有固有尺寸或定义的基线，这些被一些 CSS 属性（如垂直对齐）使用。<video><textarea><input><audio><canvas>