Html 添加了在类具有粘性时删除：：before和：：after伪元素

我的问题是，当类被添加到我的菜单中时，我的：：before和：：after on徽标就不再需要了。我不是Jquery最大的英雄，也不能用在线搜索来修复它

潜水艇

<div id='Top_bar' class='is-sticky'>
 <div class='container>
  <div class='top_bar_left>
   ::before
   <div class='logo>
   ::after

   </div>
  </div>
 </div>
</div>

---

您可以取消设置其内容（

content:unset；

）或关闭其显示（

display:none

）

例如，下面是取消设置内容（最初作为答案发布，但后来由于某种原因被删除；由于此答案已被接受，我在此处添加了此内容并标记了post Community Wiki）：

根据添加它们的选择器的不同，您可能需要使其更加具体，但这只是一般的想法

例如：

setInterval（（）=>{
document.querySelector（“.target”）.classList.toggle（“是粘性的”）；
}, 800);
.target:：before{
内容:"以前";；
}
.target：：之后{
内容：“之后”；
}
.is sticky:：before，.is sticky:：after{
内容：未设置；
}
text
使用“is sticky”设置条件，并取消设置：before和：after子项。然后，您可以在徽标上切换“is sticky”类。请记住：before和：after是类元素的子元素，而不是类元素之外的元素

.logo{

   &.is-sticky{

    &:before, &:after{
       content: none;
    }

  }

}

使用CSS:nottest怎么样？这样，如果设置了is sticky，就不会得到伪元素

见：

：not（）CSS伪类表示与选择器列表不匹配的元素。由于它阻止选择特定项，因此称为否定伪类

e、 g.
&:not（“.is sticky”）：：after
而不是&:after

这样，您就不需要在CSS中添加任何额外的条目

.is-sticky::before, .is-sticky::after {
    content: unset;
}

.logo{

   &.is-sticky{

    &:before, &:after{
       content: none;
    }

  }

}