I can't select descendant span - html

Question

I am really confused why I can't choose a span inside <a> tag by saying that
ul li a:hover span:first-child:before{
top: -10px;
left: -10px;
opacity: 1; }
This is the similar question I posted yesterday but a little bit different.
Yesterday,
what I wanted to try div wasn't children div however now span is the child of the <a> tag. I will appreciate any help.
body {
margin: 0;
padding: 0;
background: #ccc;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.center ul {
margin: 0;
padding: 0;
}
.center ul li {
list-style: none;
display: inline-block;
padding: 10px;
position: relative;
margin: 5px;
font-size: 20px;
position: relative;
}
.center ul li a {
text-decoration: none;
color: white;
}
ul li a:hover span:first-child:before {
top: -10px;
left: -10px;
opacity: 1;
}
.center ul li a span:first-child::before {
position: absolute;
content: '';
width: 8px;
height: 8px;
border-top: 5px solid black;
border-left: 5px solid black;
top: 0px;
left: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a span:first-child::after {
position: absolute;
content: '';
width: 8px;
height: 8px;
border-top: 5px solid black;
border-right: 5px solid black;
top: 0px;
right: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a span:last-child::before {
position: absolute;
content: '';
width: 8px;
height: 8px;
border-left: 5px solid black;
border-bottom: 5px solid black;
bottom: 0px;
left: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a span:last-child::after {
position: absolute;
content: '';
width: 8px;
height: 8px;
border-bottom: 5px solid black;
border-right: 5px solid black;
bottom: 0px;
right: 0;
opacity: 0.4;
transition: .6s;
}
<div class="center">
<ul>
<li>HOME <span></span><span></span></li>
<li>MENU <span></span><span></span></li>
<li>CONTACT <span></span><span></span></li>
<li>PORTFOLIO <span></span><span></span></li>
</ul>
</div>

Answer 1

Place your hover effect after all your pseudo element declarations.
body{
margin: 0;
padding: 0;
background: #ccc;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.center ul{
margin: 0;
padding: 0;
}
.center ul li{
list-style: none;
display: inline-block;
padding: 10px;
position: relative;
margin: 5px;
font-size: 20px;
position: relative;
}
.center ul li a{
text-decoration: none;
color: white;
}
.center ul li a span:first-child::before{
position: absolute;
content: '';
width: 8px;
height: 8px;
border-top: 5px solid black;
border-left: 5px solid black;
top: 0px;
left: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a span:first-child:after{
position: absolute;
content: '';
width: 8px;
height: 8px;
border-top: 5px solid black;
border-right: 5px solid black;
top: 0px;
right: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a span:last-child::before{
position: absolute;
content: '';
width: 8px;
height: 8px;
border-left: 5px solid black;
border-bottom: 5px solid black;
bottom: 0px;
left: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a span:last-child::after{
position: absolute;
content: '';
width: 8px;
height: 8px;
border-bottom: 5px solid black;
border-right: 5px solid black;
bottom: 0px;
right: 0;
opacity: 0.4;
transition: .6s;
}
ul li a:hover span:first-child::before{
top: -10px;
left: -10px;
opacity: 1;
}
I have tested it here: https://jsfiddle.net/9z7r3e8a/5/

Answer 2

Instead of :first-child you should use :first-of-type, because you already have text element in first place (and as first-child). The :first-of-type will select first span element among all children of <a>:
body {
margin: 0;
padding: 0;
background: #ccc;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.center ul {
margin: 0;
padding: 0;
}
.center ul li {
list-style: none;
display: inline-block;
padding: 10px;
position: relative;
margin: 5px;
font-size: 20px;
position: relative;
}
.center ul li a {
text-decoration: none;
color: white;
}
ul li a:hover span:first-of-type:before {
top: -10px;
left: -10px;
opacity: 1;
}
.center ul li a span:first-of-type::before {
position: absolute;
content: '';
width: 8px;
height: 8px;
border-top: 5px solid black;
border-left: 5px solid black;
top: 0px;
left: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a span:first-of-type::after {
position: absolute;
content: '';
width: 8px;
height: 8px;
border-top: 5px solid black;
border-right: 5px solid black;
top: 0px;
right: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a span:last-of-type::before {
position: absolute;
content: '';
width: 8px;
height: 8px;
border-left: 5px solid black;
border-bottom: 5px solid black;
bottom: 0px;
left: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a span:last-of-type::after {
position: absolute;
content: '';
width: 8px;
height: 8px;
border-bottom: 5px solid black;
border-right: 5px solid black;
bottom: 0px;
right: 0;
opacity: 0.4;
transition: .6s;
}
.center ul li a:hover span:first-of-type:before {
top: -10px;
left: -10px;
opacity: 1;
}
<div class="center">
<ul>
<li>HOME <span></span><span></span></li>
<li>MENU <span></span><span></span></li>
<li>CONTACT <span></span><span></span></li>
<li>PORTFOLIO <span></span><span></span></li>
</ul>
</div>