modifying :before of an element when hovered is not working

Question

I simply want the :before (underline) of my anchor to change its height every time it is hovered over, but it's not working.

I hope someone could help me. Thanks in advance.

.wrapper {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

a {
	display: inline-block;
	text-decoration: none;
	font: 4em Arial;
	color: #21a1e1;
	font-weight: 300;
	position: relative;
}

a:before {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	bottom: 0;
	background: #21a1e1;
	transition: all .3s ease-in-out;
}


/* not working */
a:hover a:before {
	height: 4px;
}

<div class="wrapper">
	<a href="">Hover</a>
</div>

Answer 1

use a:hover::before instead of a:hover a:before I'm added the working snippet below.

.wrapper {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

a {
	display: inline-block;
	text-decoration: none;
	font: 4em Arial;
	color: #21a1e1;
	font-weight: 300;
	position: relative;
}

a:before {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	bottom: 0;
	background: #21a1e1;
	transition: all .3s ease-in-out;
}


/* not working */
a:hover::before {
	height: 4px;
}

<div class="wrapper">
	<a href="">Hover</a>
</div>