Pseudo element ::after has no height

Question

I've got a strange one. I use this same bit of code all over my site, and it works everywhere. For some reason, it simply wont work here.

Basically what I am doing is creating a translucent background image by using pseudo elements :before and :afterto fill the entire container with a background color (:before) and a semi-transparent image (:after). The :before element works just fine, it fills the height and width of the .dashboard-page as expected. The :after element has 100% width, but a height of 0, so the image is not showing up. Help would be much appreciated.

.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

Try adding display: block; to :after.

By default pseudo elements are inline boxes