如何使用 JS 删除 ::after 效果？答案

【问题标题】：How could I remove the ::after effect using JS?如何使用 JS 删除 ::after 效果？
【发布时间】：2022-01-24 20:14:38
【问题描述】：

我想在使用 JS 完成一个功能后，去掉::after 效果。

代码如下：

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:'|'
}

&lt;div&gt;&lt;/div&gt;

我只是想知道是否有一种方法可以删除“|” （::after 效果）在interval 完成后。

感谢您的回复！

【问题讨论】：

@kmoser 重复的问题是关于:active 伪类，而不是::after 伪元素。您可以使用相同的解决方案吗？

标签： javascript html css

【解决方案1】：

如果您在定义中添加一个类，您可以切换并关闭它

div.foo::after{ 内容：'|' }

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)

【讨论】：