How could I remove the ::after effect using JS?

Issue

I want to remove the ::after effect after a function is completed using JS.

Here is the code:

let text = 'Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky'
let interval;
let i = 0;
interval = setInterval(function() {
  if (i < text.length) {
    document.querySelector('div').textContent += text.charAt(i)
  } else {
    window.clearInterval(interval)
  }
  i++
}, 20)

div::after {
  content: '|'
}

<div></div>

I just wonder if there is a way that I could remove the "|" (::after effect) after the interval finished.

Thanks for any responds!

Solution

If you add a class to your definition, you can switch this one and off

div.foo::after{ content:'|' }

setInterval(function(){
                if(i<text.length){
                document.querySelector('div').textContent += text.charAt(i)
            }
            else{
                window.clearInterval(interval)
                document.querySelector('div').classList.remove("foo");
            }
            i++
            },20)

Answered By - ControlAltDel