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

EDITED：

这是[{1}}

中提到的height:100%;问题

您需要提及.test:before,.test:after至height:100%以及.test和html，

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

试试这个：

body

Working Demo

Answer 2

Heres是正确的答案，因为我从未表明我是使用按钮回答的。我只是把它放在顶部，认为它会被认为是回答。基本上我第一次在某个地方做错了。希望这可以帮助那些遇到类似地雷问题的人。

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

问题似乎是您的css属性未正确声明/排列。从我看到的情况来看，你首先声明了你的背景图片，但内容最后是用背景位置宣布的。< / p>

我在Glyphicon字体上遇到了自己的问题，直到我实现了keaukraine提到的关于声明显示属性的内容之前没有显示过。

但有时候人们会忘记声明内容属性会导致预期结果消失。

所以应该安排这样的事情：

element:before {
  content: "\e013"; // or content: ""
  background:url("background_image.png");
  background-position: 0 0;
  display: inline-block;
}

伪元素没有显示

3 个答案:

EDITED：