在媒体查询中，是否可以移除 ::after 伪元素？

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;
}

- DR01D

Answer 1

最简单的方法是在媒体查询中将伪元素的content属性值设置为none。这样做可以防止伪元素被渲染。

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

根据相关规范，取值为none或normal会导致伪元素不被生成。

12.2 content 属性

none - 不生成伪元素。

normal - 对于:before和:after伪元素计算结果为none。

这里有一个基本的示例来演示它：

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

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

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

- Josh Crozier

---

这真的有效吗？我以前从未见过 content: none;。 - JakeParis

"none 伪元素不会被生成。" 十分出色的解决方案！ - DR01D

@JakeParis - 是的，它有效，参考示例我添加了。 - Josh Crozier

@JoshCrozier 我们使用CSS3，但所有链接都指向css2.1或css2.2规范。我从来没有真正理解这是为什么。W3发布的内容与我们使用的内容不匹配吗？ - DR01D

@DR01D - 我通常链接到CSS2规范，因为它们仍然相关，并且大多数情况下更容易找到。其中一些规范肯定已经过时了，但是CSS2中的大部分核心概念在CSS3中仍然完全适用（否则它们将破坏向后兼容性）。通常唯一的区别是添加了新的细节。这里是一个链接到相关的CSS3 content规范，正如您所看到的，它更加详细。 - Josh Crozier

Answer 2

易于移动优先的解决方案：

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

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

- JakeParis