Pseudo elements not showing

Question

Pseudo elements not showing on a div. I'm using a sprite image but I have tried a non-sprite image as well, yet nothing. I tried multiple strategies, such as positioning absolute, using z-index, margins, etc. I seem to be doing it correctly if I'm not mistaken or apparently I am doing something wrong. I'm new to the community and have searched here and also Google yet no result as to why it is not showing.The code is below in it's most basic try. Thanks to all who take the time to help.

.test {
    display:inline-block;
    background:#fff;
    width:60%;
}

.test:before,
.test:after {
     background:url("/imgs/Sprite2.png") repeat-y;
}

.test:before,
.test:after {
    position:relative;
    display:inline-block;
    vertical-align:top;
    width:27px;
    height:100%;
}

.test:before {
    content:"";
    background-position:0 0;
}

.test:after {
    content:"";
    background-position:-55px 0;
}

I now have it working. The code is below. I could of sworn that I already tried this but I must have did something wrong the first time I did it.

 .test {
     background:#fff;
     width:60%;margin:0  0 60px 5%;
 }

 .test:before,
 .test:after {
     content:"";
     background:url("/imgs/Sprite2.png") repeat-y;
     position:absolute;
     top:0;
     width:27px;
     height:100%;
 }

 .test:before {
     right:100%;
     background-position:0 0;
 }

 .test:after {
     left:100%;
     background-position:-55px 0;
 }   

Answer 1

EDITED:

This is an issue of height:100%; mentioned in .test:before,.test:after

You need to mention height:100% to .test and for html and body also,

See below the suggested changes in your CSS:

Try this:

body, html { height: 100%; }

.test{ 
    display:inline-block; 
    background:#fff; 
    width:60%;
    height: 100%; /*added height*/
}

.test:before,
.test:after{
    content:"";
    background:url("/imgs/Sprite2.png") repeat-y;
    position:relative;
    display:inline-block;
    vertical-align:top;
    width:27px;
    height:100%;   
}

.test:before{ background-position:0 0 }
.test:after{ background-position:-55px 0 } 

Working Demo

Answer 2

Heres's the corrected answer, since I never showed that I answered it using the button. I just placed it in the top thinking that it would be considered answered. Basically I must've done something wrong the first time somewhere. Hope this helps people who have had problems similar to mines.

.test {
    background: #fff;
    width: 60%;
    margin: 0 0 60px 5%
}

.test:before, .test:after {
    content: "";
    background: url("/imgs/Sprite2.png") repeat-y;
    position: absolute;
    top: 0;
    width: 27px;
    height: 100%
}

.test:before {
    right: 100%;
    background-position: 0 0
}

.test:after {
    left: 100%;
    background-position: -55px 0
}