为什么在特定窗口大小以下的 HTML 中不显示伪元素答案

【问题标题】：Why are pseudo-elements not showing in HTML below certain window sizes为什么在特定窗口大小以下的 HTML 中不显示伪元素
【发布时间】：2021-04-26 05:39:14
【问题描述】：

首先，请看下面的页面。

https://preview.themeforest.net/item/photography-fullscreen-wordpress-theme-johnblack-photography/full_screen_preview/18151772?_ga=2.91133081.2070407211.1611250672-625688107.1611097574

左侧的滑块顶部和底部都有深色滤镜。这是我从开发者工具中找到的滑块代码。

<div class="fs_gallery_slider" data-thumbs-btn-title="Thumbs">
::before
::after
</div>

如您所见，顶部过滤器和底部过滤器都是使用伪元素生成的。当窗口大小超过 1024 像素时，它们都以 HTML 显示，而不是当窗口大小低于 1024 像素时。我认为它们是由一些 CSS 属性控制的，例如“display:none;”，但是媒体查询没有被用于它们，所以情况似乎并非如此。

在这种情况下，这是否意味着这些伪元素是用 JavaScript 或某种方式生成的？如果有，有没有办法找到源头？

谢谢。

【问题讨论】：

请添加最小可重现代码sn-p。同样以这种方式解决问题，也是调试的第一步。您不能只在此处链接您的网站并期望每个人都访问它。如果问题得到解决或网站发生变化，那么这个问题对 SO 没有进一步的价值。
before/after 伪元素只有在具有非空 conttent 属性的情况下才会“添加”到它们的 DOM 中。非空并不是真正正确的，因为空字符串已经算作非空。所以content: ''; 已经足够购买伪元素了。由于它不在 1024 像素以下，我会说有一个媒体查询将其添加到 1024 像素以上或将其删除。以下是有关它的更多信息：stackoverflow.com/a/42653230/9184970
@Hoargarth 非常感谢您分享更多信息。我很感激。我会进一步查看，看看是否真的在某处设置了媒体查询。
@tacoshy 这个问题已经被另一个人解决了。
@Hoargarth 实际上为伪元素设置了一个媒体查询。再次非常感谢您的帮助。

标签： javascript html css media-queries pseudo-element

【解决方案1】：

In CSS, ::before creates a pseudo-element that is the first child of the selected element.

在 css 中定义的::before 位于媒体查询的后面，因此它只有在满足媒体查询参数时才会发挥作用，通常是窗口宽度。

::before 元素不仅仅存在，除非它们在 CSS 中定义。

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

【讨论】：

非常感谢@rorypicko。正如您所提到的，伪元素不只是在那里，这就是为什么我一开始找不到媒体查询的原因。