伪元素未显示答案

【问题标题】：Pseudo elements not showing伪元素未显示
【发布时间】：2012-09-24 06:15:41
【问题描述】：

伪元素未显示在 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;
}

我现在可以正常工作了。代码如下。我可以发誓我已经试过了，但我第一次做的时候肯定做错了什么。

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

【问题讨论】：

您能否在JS Fiddle 或类似地址发布一个重现您的问题（并显示您的html）的演示？
您在哪个浏览器中测试？
我正在本地设置上的所有当前浏览器上进行测试。我所有的CSS总是有效的。我刚开始尝试使用伪元素。删除图像边框的空白跨度和更清晰的标记/语义。@David Thomas 我现在要在 JS Fiddle 上试一试。
快速注释以避免其他人犯同样的愚蠢错误：如果外部元素将overflow 设置为hidden，则:after 伪元素将不会显示...跨度>
非常感谢。我错过了向这些元素添加内容

标签： css pseudo-element

【解决方案1】：

已编辑：

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

您还需要提及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 }

Working Demo

【讨论】：

:before 和 :after 伪元素显示为 inline 元素。所以你需要为它们指定display 属性。你可以在这里阅读更多：w3.org/TR/CSS2/generate.html#before-after-content
@David Thomas 和 user1693535：根据我的想法用可能的解决方案更新了我的答案。我可能错了。
我尝试只使用 display:block，但仍然没有，我也只是将代码更改为您编写它的方式 A.K.同样的结果没有。我在这里偷听。
我也试过了 A.K.我没有 body，html 设置为 100% 的高度，所以我这样做了，我将 100% 的高度添加到我已经尝试过的 div 中，仍然没有。
@Jezen Thomas - 你是什么意思？

【解决方案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
}

【讨论】：

【解决方案3】：

问题似乎是您的 css 属性未正确声明/排列。据我所知，您首先声明了 background-image，但 content 最后声明了 background-position。

我在 Glyphicon 字体上遇到了自己的问题，直到我实现了 keaukraine 提到的关于声明 display 属性的内容。

但有时人们往往会忘记声明将导致预期结果消失的 content 属性。

所以应该这样安排：

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

【讨论】：