innerText 和 CSS content:before

Question

我试图找出 ::before 选择器中的 content 是否会在任何浏览器中更改父级的 innerText。到目前为止，我已经在 Chrome 和 Safari 中进行了测试，并且它不会更改任何

中的 innerText

document.querySelectorAll("li").forEach(function() {
  this.addEventListener("click", function(e) {
    e.target.classList.toggle("Completed");
  });
});

document.getElementById("test").addEventListener("click", function() {
  console.log(testUL.innerText);
});

    li.Completed:before {
      content: "13";
      color: green;
      background: #ffdf87;
    }

<ul id="testUL">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

<button id="test">Test innerText</button>

这很适合我的目的（我正在尝试仅按文本匹配文档）。但是从我在 Mozilla 上读到的内容来看，这似乎是不正确的行为？

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText

任何人都可以测试我在此处发布的这段代码并确认类似的行为是否出现在 MS Edge 中？

Answer 1

是 MS Edge 中的相同行为 (Windows10)。

这符合预期。可以看到伪元素的内容，但它不是页面的 'proper' 部分，因此出现 'pseudo'.

这个词

基本上是为了视觉效果而不是'real'内容。例如，通常屏幕阅读器不会注意到它。

innerText 和 CSS content:before

innerText and CSS content:before

javascript

css

microsoft-edge

innertext