Add a semi transparent square in an excisting square using CSS3 and no extra DIV

Question

I currently have a simpel DIV square styled with CSS:

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

This generates a simpel red square.

Now I want to add a smaller semi transparent square in the center. In short I want something like this:

But without adding an extra DIV. How to do this (if possible)?

Thanks a lot

Answer 1

I'm not sure how practical this is, but you can use an :after pseudo element.

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