Почему after и before наезжает на текст?

Question

[Княшшш]

Есть кнопка

<a href="vk.com" class="link" target="_blank">
	<div class="text">Скачать</div>
</a>

И стили для неё

.main-bg .p-new .new-container .new-content a.link {
	text-transform: uppercase;
	background-color: #FF822E;
	padding: 5px 20px;
	display: block;
	width: 150px;
	text-align: center;
	margin: 0 auto;
	position: relative;
	border: #FF822E 1px solid;
	z-index: 3;
	overflow: hidden;
}
.main-bg .p-new .new-container .new-content a.link .text {
	color: #fff;
	font-size: 19px;
	z-index: 4;
}
.main-bg .p-new .new-container .new-content a.link::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 200%;
	background-color: #FF6517;
	top: -5px;
	left: -100%;
	opacity: .7;
	transition: all .3s;
	z-index: 1;
	transform: rotate(45deg);
}
.main-bg .p-new .new-container .new-content a.link:hover::after {
	left: -30px;
}
.main-bg .p-new .new-container .new-content a.link:hover, .main-bg .p-new .new-container .new-content a.link:active, .main-bg .p-new .new-container .new-content a.link:focus {
	text-decoration: none;
	outline: none;
	color: #333;
}

Почему after наезжает на текст? вроде z-index задал

Answer 1

[Дмитрий]

По умолчанию .text - position: static, с котором z-index не работает, поэтому необходимо задать position: relative | absolute | fixed

Добавьте

a.link .text{
	position: relative;
	z-index: 2;
}

Comments

[Княшшш]

Спасибо