为什么在某些窗口大小以下的HTML中伪元素不显示?

Question

首先请看下面的页面。

https://preview.themeforest.net/item/photography -全屏wordpress主题- 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>

可以看到，顶部过滤器和底部过滤器都是用伪元素生成的。当窗口大小超过1024px时，它们都显示在HTML中，而当窗口大小低于1024px时则不显示。我认为它们是由一些CSS属性控制的，比如"display:none;"，但是媒体查询并没有被用于它们，所以情况似乎不是这样。

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

谢谢。

Answer 1

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

::before在css中定义在媒体查询后面，所以它只在满足媒体查询参数时起作用，通常是通过窗口宽度。

::before元素不只是在那里，除非它们在CSS中定义。

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