<div class="test">
	<h1>el mouse debe pasar sobre el elemento :)</h1>
</div>

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

h1 {
	position: relative;
	width: fit-content;
	border: 1px dotted black;
}

h1::before {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0%;
	height: 4px;
	background: red;
	transition: all 0.4s cubic-bezier(0.57, 0.4, 0.55, 1.17);
	/* 	transition: all 0.4s ease-in-out; */
}
h1:hover::before {
	width: 100%;
	/* 	background: lightblue; */
}