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>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?
>Solution :
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.