css - 伪元素不显示

Question

伪元素未显示在 div 上。我正在使用 sprite 图像，但我也尝试过非 sprite 图像，但没有任何效果。我尝试了多种策略，例如绝对定位、使用 z-index、边距等。如果我没有弄错或者显然我做错了什么，我似乎做对了。我是社区的新手，在这里和谷歌上都进行了搜索，但没有找到它为什么不显示的结果。代码在下面是最基本的尝试。感谢所有花时间提供帮助的人。

.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

编辑:

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

您需要在 .test 和 html 和 body 中提及 height:100%，

请参阅下面建议的 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 } 

Working Demo