Как с помощью псевдокласса добавить блок?

Question

[Super Star]

Здравствуйте. В этом коде https://jsfiddle.net/mmnoyjoL/1/ у меня не получается добавить блок с помощью псевдокласса ::after. Оранжевый блок должен быть поверх синего. поэтому я использовал z-index, а также у меня не выходит выровнять оранжевый блок по середине серого(основного контейнера). margin: auto; в данном случае не работает.

Подскажите каким образом можно реализовать это. Спасибо.

Comments

[Котик Антон]

Псевдоэлемента

Answer 1

[Котик Антон]

.main
{
	height: 300px;
	width: 100%;
	background-color: #c6c6c6;
}

.top, .top::after
{
  display: block;
  width: 200px;
  height: 200px;
}

.top 
{
  margin: 0 auto;
  position: relative;
  background-color: #6a56ff;
  top: 50px;
  left: 50px;
}

.top::after 
{
  content: '';
  position: absolute;
  background-color: #ffcb56;
  top: -50px;
  left: -50px;
}

https://jsfiddle.net/otnn807y/1/

Comments

[Super Star]

Спасибо