Why are pseudo-elements not showing in HTML below certain window sizes

Question

First, please take a look at the page below.

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

The slider on the left side has dark filters on the top and the bottom. Here's the code of the slider that I found from the developer tool.

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

As you can see, the top filter and the bottom filter are both generated with pseudo-elements. They're both displayed in HTML when the window size is over 1024px, and not when the window size is below 1024px. I thought they were controlled with some CSS property such as "display:none;", but media queries are not being used for them, so that seems like not the case.

In this case, does it mean these pseudo-elements are generated with JavaScript or some way? If so, is there a way to find the source?

Thank you.

Answer 1

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

::before defined in the css is behind a media query so it only comes into play when the media query parameter are met, usually by window width.

::before elements are not just there, unless they are defined in CSS.

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