0

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.

Ryo
  • 75
  • 8
  • 2
    Please add a minimal reproduciable code snippet. Also pinning the issue down that way, is also the first step for debugging. You can not just link your website here and expect everybody to visit it. If the issue would be fixed or the website changed, this question would have no further value for SO. – tacoshy Jan 21 '21 at 18:28
  • 1
    before/after pseudo elements are only "added" to them DOM if they have a non empty `conttent` property. Non empty is not really correct, as an empty string already counts as non empty. So `content: '';` is already enough to shop the pseudo element. Since it's not there below 1024px, I would say there's a media query adding it above 1024px or removing it below. Here's more Info about it: https://stackoverflow.com/a/42653230/9184970 – Alex Berger Jan 21 '21 at 18:36
  • @Hoargarth Thank you very much for sharing more info. I appreciate it. I will take a further look and see if there's actually a media query set somewhere. – Ryo Jan 21 '21 at 18:43
  • @tacoshy The issue is already solved by a different person here. – Ryo Jan 21 '21 at 18:50
  • @Hoargarth There was actually a media query set for the pseudo elements. Thank you very much again for your help. – Ryo Jan 21 '21 at 18:56
  • @Ryo it wasnt solved when I stumbled opon it. Still the SO guidelines have to be respected and a minimal reproduciable code snippet should be added. Question must have a community interest for so – tacoshy Jan 21 '21 at 19:36
  • @tacoshy Again, the question is already solved and there's no point of further discussion. I'm going to close this. – Ryo Jan 22 '21 at 20:39

1 Answers1

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

rorypicko
  • 4,194
  • 3
  • 26
  • 43
  • 1
    Thank you very much @rorypicko. As you mentioned, the pseudo elements were not just there, which is why I couldn't locate the media query in the first place. – Ryo Jan 21 '21 at 19:00