可以在媒体查询中删除 ::after 伪元素吗？

Question

有没有一种简单的方法可以删除媒体查询中的 ::after 伪元素？

例如，当浏览器宽度低于 980px 时，我可以完全删除这个 ::after 伪元素吗？或者我应该用老式的方式来隐藏原来的 class 并在浏览器宽度缩小到 980px 以下时显示新的 class 吗？专业人士如何解决这个问题？

.navigation_unit > a::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: .0625rem;
    bottom: 0;
    left: 0;
    background-color: rgb(0,0,238);
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
}

Answer 1

最简单的选择是在媒体查询中将伪元素的 content property 值设置为 none。这样做时，将不会呈现伪元素。

@media (max-width: 600px) {
  .navigation_unit > a::after {
    content: none;
  }
}

如相关规范所述，值none或normal将导致不生成伪元素。

12.2 The 'content' property

none - The pseudo-element is not generated.

normal - Computes to none for the :before and :after pseudo-elements.

这里有一个基本的例子来证明这一点：

p::before {
  content: 'Psuedo-element... ';
  color: #f00;
}

@media (max-width: 600px) {
  p::before {
    content: none;
  }
}

<p>Resize this window to less than 600px</p>

Answer 2

很简单mobile-first解决方案：

.navigation_unit a:after {
   ...
   /* everything except content: '' */
}

@media (min-width:980px) {
    .navigation_unit > a:after {
        content: '';
    }
}

可以在媒体查询中删除 ::after 伪元素吗？

Can ::after pseudo elements be removed inside media queries?

html

css

pseudo-element