jst16 jst16 - 13 days ago 6
CSS Question

modifying :before of an element when hovered is not working

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

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>