Before element not being created

Question

the problem is the before element is not been created for .flag-container, does anyone knows what am I missing? The idea is to use it for some hover effect over the flag-container.

<div class="infoArrowNoPath">
        <section class="infoArrow">
            <h2>Worldwide sales to +44 countries</h2>

            <div class="flags-container">
                <% flags.forEach( flag => { %>
                    <div class="flag-container"><img src=<%=`/assets/flags/${flag}.gif`%>></div>
                <% }) %>
            </div>
        </section>
    </div>

Here the CSS:

.flags-container {
    margin: 2rem 0;
    width: 80%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

        .flag-container {
            background-color: $colorBackgroundDark;
            margin: 0.5rem 0.25rem;
            padding: 0.5rem;
            display: flex;
            border-radius: 0.5rem;

                img {
                    width: 80px;
                    height: 80px;
                    object-fit: scale-down;
                }
        }

        .flag-container::before {
            background-color: blue;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
}

I also tried with standard CSS code.

Answer 1

Add content: ''; to the :before rule:

.flags-container {
  margin: 2rem 0;
  width: 80%;
  height: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flag-container {
  background-color: $colorBackgroundDark;
  margin: 0.5rem 0.25rem;
  padding: 0.5rem;
  display: flex;
  border-radius: 0.5rem;
}

img {
  width: 80px;
  height: 80px;
  object-fit: scale-down;
}

.flag-container::before {
  content: '';
  background-color: blue;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

<div class="infoArrowNoPath">
  <section class="infoArrow">
    <h2>Worldwide sales to +44 countries</h2>

    <div class="flags-container">
      <% flags.forEach( flag => { %>
        <div class="flag-container"><img src=<%=`/assets/flags/${flag}.gif`%>></div>
        <% }) %>
    </div>
  </section>
</div>