Current element hiding, after hover on it (opacity changed) - css

Question

I have a block with .cube class - which implement a red cube.
.cube {
position: absolute;
top: 50px;
left: 50px;
width: 20px;
height: 20px;
background: red;
transition: .3s opacity;
}
And pseudo-selector :before with a "border" around it (actually it's just more larger cube around .cube class).
.cube::before {
position: absolute;
top: -10px; left: -10px;
right: -10px; bottom: -10px;
content: '';
background: black;
z-index: -1;
}
On :hover I change my opacity in .cube class.
.cube:hover {
opacity: .5;
}
The question is: why .cube class on hover is disappears, in turn, it is not "under" :before. Where it?
Here is JSFiddle. Thanks!
.cube {
position: absolute;
top: 50px;
left: 50px;
width: 20px;
height: 20px;
background: red;
transition: .3s opacity;
}
.cube::before {
position: absolute;
top: -10px; left: -10px;
right: -10px; bottom: -10px;
content: '';
background: black;
z-index: -1;
}
.cube:hover {
opacity: .5;
}
<div class="cube"></div>

Answer 1

Paulie_D was right! The stacking context is being affected. Check this out here for more information:
https://www.w3.org/TR/css3-color/#transparency
I decided to modify your example to show what's going on a bit more easily. I must say, you don't see browser stacking context coming into play this way every day! (Sorry)
Here's what I've done:
Extended the duration of the original transition
Added a transition of a different time to differentiate each direction of the interim change.
Changed the color from black to cyan to help with visual color changes (A brighter color will help one see the difference between 'above' and 'below' in stack
Added a reduced opacity style to the (presently) cyan colored :before element.
Here's the fiddle:
https://jsfiddle.net/c5d5thhk/
Instructions: Mouse over the box. Please Note:
the change in color relative to the timing of the relevant transition.
that the appearance in color (affected by opacity) never truly finishes changing back to its initial state (until an end-'flick' at the very end of the transition) when coded like this. This is because the inherent change in stacking context is never allowed to return back to the initial state smoothly as the transition commands. This is why I've changed the coloring to cyan and added the opacity rules that I have.
Don't forget: ::before is inherently before the rest of the element in source order. It may help to see this fiddle with ::before changed to ::after to help demonstrate the other side of the fence. https://jsfiddle.net/c5d5thhk/1/
And yes, there is some buggy behavior on several browsers for this demo; sometimes the transition never allows the stacking context to return to its initial order, even when the opacity has finished its course in the transition's entire duration of 3s (3 seconds) - if this gets in the way of your testing, play around with the mouse a bit; the agitation should cause it to resolve within a few moments if it doesn't on its own.
Edit:
Just saw that the MDN has a much clearer breakdown than the W3C (surprise, surprise) on how the stacking context goes. Check it out here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
Also, check this out for influencing stacks:
https://developer.mozilla.org/en-US/docs/Web/CSS/isolation
Edit 2: (added comment)
Here's a bit more information. As for your repeated question, your red box's box model is behind the black box. However, because of the rendering process taken to address transparency, it isn't shown in your example when the opacity style is engaged. In other words: even though the black box has a reduced opacity where one expects to have any content behind it revealed, the red box will still not be shown because of the process taken for the alpha channel. If you'd like to learn more about this, try running this with an SVG.