Css 伪元素：：after没有高度

我有一个奇怪的。我在我的网站上到处都使用同样的代码，而且在任何地方都可以使用。出于某种原因，它在这里根本不起作用

基本上，我所做的是通过使用伪元素

:before

和

:after

创建半透明背景图像，用背景色（

:before

）和半透明图像（

:after

）填充整个容器。

：在

元素正常工作之前，它会按预期填充

.dashboard页面的高度和宽度。
：after
元素的宽度为100%，但高度为0，因此图像不会显示。非常感谢您的帮助

.dashboard-page {
    width: 100%;
    position: relative;
    z-index: 1;
    @include clearfix;

    &:before,
    &:after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        @include transition($transition-main);
    }

    &:before {
        z-index: -2;                    
        background-color: $blue-light;
    }

    &:after {
        opacity: 0.02;
        z-index: -1;    
        background-image: url('../life/assets/img/pattern.png');                
    }
}

尝试添加
显示：块到
：在
之后

默认情况下，伪元素是内联框
请尝试使用空格将
内容：'
更改为
内容：'
。您有此示例吗？您的clearfix可能会覆盖其他CSW。没有更多代码，这是不可复制的。我想知道为什么要使用伪元素而不是多个背景：Cimmanon-我使用伪元素而不是多个背景，因为背景图像本身需要半透明，而颜色需要完全不透明。我在网站上也使用了相同的图案和多种不同的颜色，因此我不必调用多个背景图像，而是选择使用伪元素，这样我可以调整背景图像的不透明度。显示块修复了它，尽管我不需要在网站上的任何其他地方使用它。最奇怪的事。谢谢你的帮助，@derek_duncan。很高兴我们能把它修好@idealbrandon