html - 使用 CSS3 在现有正方形中添加半透明正方形，无需额外的 DIV

Question

我目前有一个使用 CSS 设置样式的 simpel DIV 正方形:

.redBlock {
    background-color: #e00808;
    z-index: 10;
}

这会生成一个简单的红色方 block 。

现在我想在中心添加一个较小的半透明正方形。简而言之，我想要这样的东西:

但没有添加额外的 DIV。如何做到这一点(如果可能)？

非常感谢

Answer 1

我不确定这有多实用，但你可以使用 :after 伪元素。

http://jsfiddle.net/xgez0uaz/

HTML

<div class="test">

</div>

CSS

.test {
    width: 100px;
    height: 100px;
    background: red;
    padding: 10px;
}

.test:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    z-index: 10;
    position: relative;
}