how to handle 'double opacity' of two overlapping divs

Question

I have two divs, both with 0.6 opacity. I need them to overlap but retain their opacity and not create a new combined opacity level. I can\'t use an image.

EDIT -- The

Answer 1

How about this: http://jsfiddle.net/rudiedirkx/TqRCw/

(Dabble's editor sucks!!)

It can't be done with only pseudo elements sadly =(

It can be done with only pseudo elements! See pixelass' answer. CSS3 is a requirement though.