CSS内容属性如何工作？

Question

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

Answer 1

从W3C：

此属性（内容）是用来与：前和：后伪元素到 生成文档中的内容。 生成的内容不会更改 文档树。具体而言，它不反馈给文档 语言处理器（例如，用于重新分析）。

此外，根据MDN：使用所述内容属性插入

对象是匿名替换 元件。在CSS中，被替换的元素是一个元素，其 表示超出了CSS的范围。这些是外部的 对象，其表示与CSS无关。典型的 替代元素是<image>,<object>,<video>或形式元素如 <textarea>,<input>。一些元素，如<audio>或<canvas>仅在特定情况下被替换为 元素。使用 CSS内容属性插入的对象是匿名替换的元素。 CSS在某些情况下特别处理替换元素，例如在计算边距和一些自动值时。 请注意，某些替换的元素（但不是全部）具有固有的 尺寸或定义的基准，某些CSS属性 （如vertical-align）使用此基准。

Answer 2

我发现这对CSS 2.1 spec

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