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

Question

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

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

.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属性值设置none在媒体查询内部。这样做时，不会呈现伪元素。

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

如相关规范所述，值noneornormal将导致伪元素没有生成。

12.2 “内容”属性

none - 不生成伪元素。

normal-计算到none的:before和:after伪元素。

这是一个基本示例，演示了这一点：

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

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

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