伪元素::after没有高度

我有一个奇怪的。我在我的网站上使用相同的代码,而且它在任何地方都有效。由于某种原因,它在这里根本行不通。

基本上,我所做的是通过使用伪元素创建半透明背景图像 :before 和 :after 用背景色填充整个容器( :之前 )和半透明图像( :之后 ). 这个 :之前 元素工作得很好,它填充了 .dashboard-page 正如预期的那样。这个 :之后 元素的宽度为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');                
    }
}