css - 伪元素::after 没有高度

Question

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

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

Answer 1

尝试添加 display: block;至 :after .

默认情况下，伪元素是内联框