innerText 和 CSS 内容：之前答案

【问题标题】：innerText and CSS content:beforeinnerText 和 CSS 内容：之前
【发布时间】：2022-01-06 09:37:54
【问题描述】：

我试图找出::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: "\2713";
      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

谁能测试我在这里发布的这个 sn-p 并确认 MS Edge 中是否发生类似行为？

【问题讨论】：

为什么您认为从innerText 中排除伪元素内容是不正确的行为？文档的哪一部分与观察到的行为相矛盾？它说“Value: 一个DOMString，表示元素的渲染文本内容。” — 注意伪元素既不是元素也不是节点。 specification 与观察到的行为一致。

标签： javascript css microsoft-edge innertext

【解决方案1】：

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

这符合预期。可以看到伪元素的内容，但它不是页面的“适当”部分，因此是“伪”一词。

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

【讨论】：

谢谢你！特别是，关于这对屏幕阅读器的影响的信息非常有用，让我思考如何使我的产品和样式更容易被所有人访问