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;
 }   

```