Question

以下代码：

<!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中存在“添加之前 - ”字样在哪里？

编辑：我想知道我们是否会在DOM中出现的值。如果不是，请你解释一下它的工作原理。

Answer 1

::before，::after和::first-line等CSS pseudo-elements不存在于DOM中，因为它们不是真正的DOM元素（因此，＆＃34;伪＆＃ 34）。伪元素是由CSS创建并由浏览器呈现的虚拟元素。它们不是HTML的一部分。此外，由于它们不是DOM的一部分，因此无法直接使用JavaScript进行定位和控制。但是，您应该能够通过浏览器直接访问伪元素。

Answer 2

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

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

Get Pseudo-Element Properties with JavaScript

在DOM中添加之前::的内容在哪里

2 个答案: