Как убрать псевдоэлемнент за кнопки ссылок?

Question

[JohnDoe116]

Не могу убрать псевдотень картинкой за элементы с помощью z-index. Может есть какой-нибудь способ сделать и без псевдоэлементов?Любой способ подойдёт!

<div class="header-middle container-inner">
				<div class="promo-setion">
					<div class="promo title">
						<a href="#">Secure Email Communication</a>
						<p>Based in <span>Somewhere</span></p>
					</div>
					<div class="account-creation">
						<a href="#">Create account</a>
						<a href="#">Apple</a>
						<a href="#">Coogle Play Store</a>
					</div>
				</div>
			</div>

.account-creation {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 60px;
	z-index: 20;
}
 
.account-creation::before {
	position: absolute;
	content: "";
	width: 602px;
	height: 57px;
	background: url(../img/c-shadow.png);
	background-repeat: no-repeat;
	z-index: 10;
}

Comments

[Lynn «Кофеман»]

Почему бы не просто фоном элемента?

Answer 1

[Дмитрий]

Достаточно добавить z-index к ссылкам

.account-creation a {
z-index: 11;
}

https://codepen.io/dmikshin/pen/rgbJdO?editors=1100

Comments

[JohnDoe116]

а почему не самому блоку?

[Дмитрий]

Сейчас получается, что вы прописали account-creation z-index и его псевдоэлементу, получается, что ссылки находятся ниже, т.к. у него не установлен z-index

Про работу z-index с псевдоэлементами советую почитать первую ссылку в гугле по запросу "z-index для псевдоэлементов"

[Дмитрий]

Вот визуальное представление z-index, возможно станет понятней