::before 添加到 DOM 的内容在哪里答案

【问题标题】：where is the content of ::before added in DOM::before 添加到 DOM 的内容在哪里
【发布时间】：2015-10-24 20:16:40
【问题描述】：

以下代码：

<!DOCTYPE html>
<html>
<head>
<style>
div::before {
    content: "Adding Before -";
}
</style>
</head>
<body>

<p>Test</p>

<div>Content</div>

</body>
</html>

输出将是“添加之前 - 内容”

但我的问题是，在 DOM 中我只能看到“<div>Content</div>”。 DOM 中的“Adding Before -”字样在哪里？

已编辑：我想知道我们的值是否会出现在 DOM 中。如果没有，请您解释一下架构是如何工作的。

【问题讨论】：

在实时 html 中看不到它们...因为它是 css。同样，它也不是该元素文本的一部分
它们不存在于 DOM 中。这是设计使然。
How to access CSS generated content with JavaScript 的可能重复项
作为参考，Chrome 在 Inspector 中的适当位置（即父级的第一个“子级”）显示伪元素。这是可能的，因为它是浏览器在做的——你没有这样的访问权限。
@user1150362，您的标签javascript 导致我回答错误

标签： jquery html css dom

【解决方案1】：

CSS pseudo-elements 诸如 ::before、::after 和 ::first-line 不存在于 DOM 中，因为它们不是真正的 DOM 元素（因此，“伪”）。伪元素是由 CSS 创建并由浏览器呈现的虚拟元素。它们不是 HTML 的一部分。此外，因为它们不是 DOM 的一部分，所以它们不能被 JavaScript 直接定位和控制。但是，您应该能够直接通过浏览器访问伪元素。

【讨论】：

谢谢，但如果不在 DOM 中，这些值将存储在哪里？任何技术解释都会帮助我。
在渲染引擎中。打开 Chrome 开发工具或 Firefox 检查器。您将在 HTML 窗格中看到呈现的伪元素。
这也可能对您有所帮助：stackoverflow.com/questions/10174719/…

【解决方案2】：

您可以通过检索受影响的 DOM 节点的计算样式来读取其内容。

var content = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('content');

Get Pseudo-Element Properties with JavaScript

【讨论】：