Question

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

例如，当浏览器宽度低于980px时，我可以完全删除此::after伪元素吗？或者我应该用老式的方式来隐藏原始类并在浏览器宽度缩小到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 property值设置为none。这样做，将不会呈现伪元素。

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

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

12.2 The 'content' property

none - 未生成伪元素。

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

这是一个证明这一点的基本例子：

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

简单的移动优先解决方案：

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

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

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

2 个答案: