CODEWITHSUNDEEP
csspseudo-element
Ilja
Ilja

Reputation: 46479

Make empty :after occupy it's predecessors width and height

I'm using an :after on a div to add an overlay background (in my case I can't just add it as second one to original div)

And I'm trying to force it to occupy whole width and height of its "predecessor" div, tried width and height at 100% as well as inherit, but nothing works, content of :after element is empty ("") but it has a background image that needs to be displayed.

EDIT: http://jsfiddle.net/96VfF/ (Here is js fiddle)

Upvotes: 0

Views: 555

Answers (1)

Etheryte
Etheryte

Reputation: 25310

You can use absolute positioning.

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

Upvotes: 1

Related Questions