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

December 24, 2021

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)