伪元素没有显示

Question

伪元素没有显示在div上.我正在使用精灵图像,但我也尝试过非精灵图像,但没有.我尝试了多种策略,例如定位绝对,使用z-index,margin等.如果我没有弄错或显然我做错了什么,我似乎正确地做了.我是社区的新手,已经在这里和谷歌搜索但没有结果为什么它没有显示.代码在下面是它最基本的尝试.感谢所有花时间提供帮助的人.

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

我现在有它的工作.代码如下.我本可以发誓我已经尝试过了,但是第一次做这件事我肯定做错了.

 .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

编辑:

这是一个height:100%;提到的问题.test:before,.test:after

您需要提及height:100%到.test和html和body也,

请参阅以下CSS中的建议更改:

试试这个:

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 } 

工作演示

Answer 2

这是正确的答案，因为我从未表明我使用按钮回答了它。我只是把它放在最上面，认为它会被视为已回答。基本上我第一次肯定在某个地方做错了什么。希望这对遇到类似问题的人有所帮助。

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