Проблема z-index и opasity

[Biotoxsin 4]

Здравствуйте!

Подскажите как можно справиться с такой проблемой:

<div class="test"></div>

.test {
	position: relative;
	height: 10px;
  	width: 10px;
  	background: #353535;
  	opacity: 0;
  	transition: all 3s linear;
}
.test::before {
	content: "";
  	position: absolute;
	height: 10px;
  	width: 10px;
  	background: #595959;
  	z-index: -1;
}

И если мы присвоим блоку "test" "opacity: 1;" во время анимации наш "::before" будет отображаться поверх нашего блока "test". Скажите есть возможность отображения этого "::before" как задумывалось?