CSS 伪元素不显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12559763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pseudo elements not showing
提问by Tony
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.
伪元素未显示在 div 上。我正在使用精灵图像，但我也尝试过非精灵图像，但什么也没有。我尝试了多种策略，例如绝对定位、使用 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;
}
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;
}
采纳答案by Tony
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
}
回答by Ahsan Khurshid
EDITED:
编辑：
This is an issue of height:100%;mentioned in .test:before,.test:after
这是在中height:100%;提到的一个问题.test:before,.test:after
You need to mention height:100%to .testand for htmland bodyalso,
你需要提到height:100%to.test和 forhtml并且body，
See below the suggested changes in your CSS:
请参阅下面建议的 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 }
回答by Randy
It seems the problem was your css properties not declared/arranged properly. From what I've seen, you've declared first your background-imagebut the contentwas declared last with the background-position.
问题似乎是您的 css 属性未正确声明/排列。从我所看到的，你首先声明了你的背景图像，但内容是最后用background-position 声明的。
And I had my own problem on Glyphicon font which was not showing before until I implemented what keaukraine had mentioned about declaring displayproperty.
我在 Glyphicon 字体上遇到了自己的问题，直到我实现了 keaukraine 提到的关于声明显示属性的内容之前，它才显示出来。
But sometimes people tend to forget declaring the contentproperty that will be resulted the expected result to disappear.
但有时人们往往会忘记声明将导致预期结果消失的内容属性。
So it should be arranged something like this:
所以它应该是这样安排的：
element:before {
content: "\e013"; // or content: ""
background:url("background_image.png");
background-position: 0 0;
display: inline-block;
}
