html 伪元素放入标签,css – ：之前和之后：html标签上的伪元素在Chrome中不稳定...

我正在尝试学习如何使用：before和：after伪元素.我正在尝试将黑色背景添加到页面底部作为粘性页脚,但它似乎无法正常工作.

基本上我有一个重复的图像作为HTML元素的背景,然后我添加一个绝对div位于底部与纯黑色背景.

我只是想指出这是一个学习实验而不是我如何实现相同的效果,但我正在尝试的是在Firefox中工作但不在Chrome中工作！

这是我的CSS：

html {

background-image: url('images/template/html-bg.jpg');

background-position: top left;

background-repeat: repeat-x;

background-color: #0e0e0e;

height: 100%;

position: relative;

}

html:before {

content: "";

display: block;

background-color: #000;

width: 100%;

height: 138px;

bottom: 0px;

position: absolute;

}

在FF中,页面按照我的预期呈现,但在Chrome中,整个页面都是黑色的…任何想法,我做错了吗？