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

i have block .cube class - implement red cube.

.cube {     position: absolute;     top: 50px;     left: 50px;     width: 20px;     height: 20px;     background: red;     transition: .3s opacity; } 

and pseudo-selector :before "border" around (actually it's 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 change opacity in .cube class.

.cube:hover {     opacity: .5; } 

the question is: why .cube class on hover disappears, in turn, not "under" :before. it?

here 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>

paulie_d right! stacking context being affected. check out here more information:

https://www.w3.org/tr/css3-color/#transparency

i decided modify example show what's going on bit more easily. must say, don't see browser stacking context coming play way every day! (sorry)

here's i've done:

• extended duration of original transition
• added transition of different time differentiate each direction of interim change.
• changed color black cyan visual color changes (a brighter color 1 see difference between 'above' , 'below' in stack
• added reduced opacity style (presently) cyan colored :before element.

here's fiddle:
https://jsfiddle.net/c5d5thhk/

instructions: mouse on box. please note:

• the change in color relative timing of relevant transition.
• that appearance in color (affected opacity) never finishes changing initial state (until end-'flick' @ end of transition) when coded this. because inherent change in stacking context never allowed return initial state smoothly transition commands. why i've changed coloring cyan , added opacity rules have.
• don't forget: ::before inherently before rest of element in source order. may see fiddle ::before changed ::after demonstrate other side of fence. https://jsfiddle.net/c5d5thhk/1/

and yes, there buggy behavior on several browsers demo; transition never allows stacking context return initial order, when opacity has finished course in transition's entire duration of 3s (3 seconds) - if gets in way of testing, play around mouse bit; agitation should cause resolve within few moments if doesn't on own.

edit:

just saw mdn has clearer breakdown w3c (surprise, surprise) on how stacking context goes. check out here:
https://developer.mozilla.org/en-us/docs/web/css/css_positioning/understanding_z_index/the_stacking_context

also, check out influencing stacks:
https://developer.mozilla.org/en-us/docs/web/css/isolation

edit 2: (added comment)
here's bit more information. repeated question, red box's box model behind black box. however, because of rendering process taken address transparency, isn't shown in example when opacity style engaged. in other words: though black box has reduced opacity 1 expects have content behind revealed, red box still not shown because of process taken alpha channel. if you'd learn more this, try running svg.