添加 class is-sticky 时删除 ::before 和 ::after 伪元素

Question

我的问题是，当 class 粘性添加到我的菜单时，我的 ::before 和 ::after 徽标就不再需要了。我不是 Jquery 的最大英雄，无法通过在线搜索修复它。

div

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

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

我的 scss

.logo {
        background: #1A2741;
        padding: 0 50px;
        width: 13%;
        margin: 0 !important;

        #logo {
          margin-left: 39%;
        }

        &::before {
          content: ' ';
          background-image: url(../uploads/RH-Beelmerk.svg);
          height: 100px;
          width: 50px;
          position: absolute;
          padding: 50px;
          z-index: 2;
          top: -85%;
          left: 1%;
          transition: top 2s;
        }

        &:hover::before {
          top: -50%;
        }

        &::after {
          content: '';
          background: #1A2741;
          height: 110px;
          width: 50px;
          display: block;
          transform: rotate(10deg);
          position: absolute;
          left: 15.5%;
          top: -6%;
          z-index: 0;
          border-right: solid 4px #FF8496;
        }
      }

Answer 1

您可以取消设置它们的内容 (content: unset;) 或关闭它们的显示 (display: none)。

例如，这里取消设置内容 （最初 post 被 doğukan 编辑为答案，但后来由于某种原因被删除；由于这个答案被接受，我已在此处添加并标记 post Community Wiki):

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

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

示例：

setInterval(() => {
    document.querySelector(".target").classList.toggle("is-sticky");
}, 800);

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

<div class="target"> text </div>

或者关闭内容显示：

.is-sticky::before, .is-sticky::after {
    display: none;
}

示例：

setInterval(() => {
    document.querySelector(".target").classList.toggle("is-sticky");
}, 800);

.target::before {
    content: 'before';
}
.target::after {
    content: 'after';
}
.is-sticky::before, .is-sticky::after {
    display: none;
}

<div class="target"> text </div>

Answer 2

使用 'is-sticky' 设置条件并取消设置 :before 和 :after children。然后，您只需切换徽标上的 'is-sticky' class 即可。请记住，:before 和 :after 是 class-element 的 children，而不是 class-element.

之外的元素

.logo{

   &.is-sticky{

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

  }

}

Answer 3

如何使用 CSS :not test，如果设置了 is-sticky，这样你就不会得到伪元素。

参见MDN：

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

例如&:not('.is-sticky')::after 而不是 &::after

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

添加 class is-sticky 时删除 ::before 和 ::after 伪元素

Removing ::before and ::after pseudo-elements when class is-sticky is added

html

css

version-control

jquery