修改：在悬停的元素之前不起作用

Question

我只是希望我的锚的:before（下划线）每次悬停时都会改变它的高度，但它不起作用。

我希望有人可以帮助我。提前谢谢。

.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

使用 a：hover :: before 而非 a：悬停a：之前我添加了下面的工作代码段。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;