I am trying to find out if content in a ::before selector changes the parent's innerText in any browser. I have tested in Chrome and Safari so far, and it doesn't change the innerText in either

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

This is good for my purposes (I am trying to match documents by text only). But from what I read on Mozilla, it seems like maybe this is incorrect behavior?

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

Can anyone test this snippet I've posted here and confirm if similar behavior occurs in MS Edge?

CodePudding user response：

Yes same behaviour in MS Edge (Windows10).

This is as expected. The content of the pseudo element can be seen, but it not a 'proper' part of the page, hence the word 'pseudo'.

It is basically there for visual effect rather than 'real' content. For example, normally screen readers won't take any notice of it.