Css ：之后和：之前正在塌陷？

参考：
目前只针对firefox进行了优化（如果在其他浏览器中查看，可能会发现额外的bug）

--第一次做海报的人，我真的需要一些帮助，谢谢

---

我在这里构建一个非常简单的投资组合页面，我计划稍后在上面进行扩展

我想给每个模块添加一个分层效果，就像Chris Coyier在他的网站上做的那样：

我已将图层设置为绿色和黄色，以帮助它们脱颖而出

HTML标记：

<div id="mh-com" class="abc portmodule">
    <div class="portmoduleimg"></div>
        <div class="portmoduleinfo">
            <h3><a href="http://www.marlonheimerl.com/" rel="nofollow">MarlonHeimerl.com</a></h3>
            <p>...</p>
        </div>
    </div>
<div id="business-template" class="zxc portmodule">
    <div class="portmoduleimg"></div>
        <div class="portmoduleinfo">
            <h3><a href="" rel="nofollow">Business Template</a></h3>
            <p>...</p>
        </div>
    </div>

---

我想让每个单独的模块都有一个分层的效果。我希望你们能帮助我！谢谢！

我找到了一个“次要解决方案”。。。 我的意思是，我不认为这是首选的方法。

似乎：before&:after伪元素的绝对位置都是基于父元素的，而不是我所认为的子元素。 您会注意到，在我的分叉代码笔中，我增加了“业务模板”元素的顶部调整，以适应页面上较低的位置

---

如果有人知道一个更简单的解决方案，我仍然会喜欢它。谢谢！！！

什么是小故障？在我的firefox和chrome中正确显示。你只是想像CSS阴影一样为它添加深度吗？顺便说一句，这是一个JSFIDLE。请在你的帖子中使用这些。正如你所看到的，提供的代码对我们没有多大帮助。这里的人很快就知道了否决投票，所以你需要问清楚的Q和A风格的问题来避免它们。我的目标是让每个模块都有自己的“：before”和“：after”层。换句话说，我希望两个模块之间有一个绿色和黄色的分隔。“：before&：”after”代码链接到2个单独的“.portmodule”类，因此应该分别显示两次，但它将它们合并为一个高：before:after元素。下面是一个类似于您所问的示例：这更容易帮助您，谢谢。（

。portmodule

位于CSS的底部，供将来的读者阅读）。我试过在

上使用底部边距。portmodule:before

，在两个框之间添加一个间隔符，甚至将它们包装在单独的容器中并填充。我认为这是伪元素的问题，我在演示链接上注意到，他没有让它们那样分开（这是两组完全不同的元素样式）.我还注意到他的第一个（左上角的徽标）的位置绝对正确。也许用一个边框精灵？祝你好运。

.portmodule {
margin-top: 25px;
height:300px;
overflow: hidden;
width:969px;
background-color:rgb(98, 109, 111);
color: rgb(192,204,206);
}
.portmodule:after, .portmodule:before {
content:"";
position: absolute;
top:6px;
left:6px;
background-color: green;
width:100%;
height:100%;
z-index: -1;
}
.portmodule:before {
top:12px;
left:12px;
background-color: yellow;
}