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

Posted 2023-03-05

【中文标题】可以在媒体查询中删除 ::after 伪元素吗？

【英文标题】：Can ::after pseudo elements be removed inside media queries?

【发布时间】：2017-07-08 06:01:19

【问题描述】：

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

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

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

【参考方案1】：

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

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

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

12.2 The 'content' property

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>

【讨论】：

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

content: none; "none 没有生成伪元素。"绝妙的解决方案！

@JakeParis - 是的，它有效，请参阅 the example 我添加以供参考。

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

@DR01D - 我通常会链接到 CSS2 规范，因为它们仍然相关，并且大多数时候更容易找到。一些规范肯定已经过时了，但是 CSS2 中的大多数核心概念仍然完全适用于 CSS3（否则它们会破坏向后兼容性）。通常，唯一的区别是添加了新的细节。 Here is a link 到相关的 CSS3 content 规范，如您所见，它更详细。

【参考方案2】：

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

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


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