css - 清空 :after occupy it's predecessors width and height

Question

我在 div 上使用 :after 来添加叠加背景(在我的例子中，我不能将它作为第二个添加到原始 div)

我试图强制它占据其“前任”div 的整个宽度和高度，尝试将宽度和高度设置为 100% 以及继承，但没有任何效果，:after 元素为空 ("") 但它有需要显示的背景图像。

编辑:http://jsfiddle.net/96VfF/ (这里是 js fiddle )

Answer 1

你可以使用绝对定位。

Sample Jsfiddle .

div {
   padding: 30px; 
   position: relative;
}

div:after {
    content: "";
    position: absolute;
    display: block;
    background: rgba(255,0,0,0.5);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}