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!
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)