Text hidden by 'before' css element - html

Question

I'm trying to replicate something I saw on another site, but currently my before element is hiding my text. Is there anything I can do to fix it?
This is the example:
body {margin: 20px;}
a {
padding: 120px;
position: relative;
color: white;
overflow: hidden;
display: inline-block;
font-size: 16px;
}
#hello:before {
background-color: #4541f1;
position: absolute;
top: 0;
content: "";
left: 0;
right: 0;
bottom: 0;
}
#hello:hover::before {
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
transform: perspective(100px) translateZ(-50px);
}
Test

Answer 1

Add a negative z-index to push that layer below the "parent".
body {
margin: 20px;
}
a {
padding: 120px;
position: relative;
color: white;
overflow: hidden;
display: inline-block;
font-size: 16px;
}
#hello:before {
background-color: #4541f1;
position: absolute;
top: 0;
content: "";
left: 0;
right: 0;
bottom: 0;
z-index: -1; /* this here */
}
#hello:hover::before {
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
transform: perspective(100px) translateZ(-50px);
}
Test

Answer 2

use z-index to see the text
body {margin: 20px;}
a {
padding: 120px;
position: relative;
color: white;
overflow: hidden;
display: inline-block;
font-size: 16px;
}
#hello:before {
background-color: #4541f1;
position: absolute;
top: 0;
content: "";
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
#hello:hover::before {
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
transform: perspective(100px) translateZ(-50px);
}
Test

Answer 3

Add z-index: -1 to :before pseudo element.
body {margin: 20px;}
a {
padding: 120px;
position: relative;
color: white;
display: inline-block;
font-size: 16px;
}
#hello:before {
background-color: #4541f1;
position: absolute;
top: 0;
content: "";
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
#hello:hover::before {
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
transform: perspective(100px) translateZ(-50px);
}
Test

Answer 4

Simple. Add z-index:-1; in #hello:before.
body {margin: 20px;}
a {
padding: 120px;
position: relative;
color: white;
overflow: hidden;
display: inline-block;
font-size: 16px;
}
#hello:before {
background-color: #4541f1;
position: absolute;
top: 0;
content: "";
left: 0;
right: 0;
bottom: 0;
z-index:-1;
}
#hello:hover::before {
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
transform: perspective(100px) translateZ(-50px);
}
Test

Answer 5

You can fix that by adding a z-index: -1 on the before element
body {margin: 20px;}
a {
padding: 120px;
position: relative;
color: white;
overflow: hidden;
display: inline-block;
font-size: 16px;
z-index: 1;
}
#hello:before {
background-color: #4541f1;
position: absolute;
top: 0;
content: "";
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
#hello:hover::before {
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
transform: perspective(100px) translateZ(-50px);
}
Test