求助：.flag-container的::before伪元素未生成，该如何解决？

核心问题分析 #

你的伪元素未被渲染，主要是以下几个关键遗漏点：

• 缺少content属性：CSS伪元素::before/::after必须声明content属性（哪怕是空值），这是浏览器渲染伪元素的必要前提。
• 父元素未设置定位上下文：伪元素使用了position: absolute，但.flag-container默认是position: static，导致伪元素会相对于更高层级的已定位元素定位，而非.flag-container本身，最终位置错乱甚至不可见。
• 未处理层级与hover触发逻辑：若要实现hover效果，还需要控制伪元素的初始状态和hover时的样式变化。

修复后的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;
        /* 设置相对定位，作为伪元素的定位基准 */
        position: relative;
        /* 避免伪元素超出容器圆角范围 */
        overflow: hidden;

        img {
            width: 80px;
            height: 80px;
            object-fit: scale-down;
            /* 让图片层级高于伪元素，防止被覆盖 */
            position: relative;
            z-index: 1;
        }
    }

    .flag-container::before {
        /* 必须添加content属性，空值即可触发渲染 */
        content: '';
        background-color: blue;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* 初始状态隐藏，hover时显示 */
        opacity: 0;
        transition: opacity 0.3s ease;
        /* 确保伪元素在图片下方 */
        z-index: 0;
    }

    /* 触发hover效果 */
    .flag-container:hover::before {
        opacity: 0.5;
    }
}

关键修改点说明 #

1. 添加content: ''：给伪元素声明空内容，让浏览器识别并渲染该元素。
2. 设置.flag-container为position: relative：让绝对定位的伪元素以容器为基准定位，确保伪元素完全覆盖在容器范围内。
3. 层级与过渡效果：通过z-index保证图片不被伪元素遮挡，用opacity和transition实现平滑的hover淡入效果（可根据需求调整背景色、透明度或切换显示方式）。
4. overflow: hidden：让伪元素被容器的圆角剪裁，保持视觉一致性。

内容的提问来源于stack exchange，提问作者AlZ