.pink-class {
    text-decoration: none;
    transition: opacity 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
}
.pink-class::after {
    --scale: 0;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 2px;
    border-radius: 0px;
    background: #fbfbfb;
    transform: scaleX(var(--scale));
    transform-origin: var(--x) 50%;
    transition: transform 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
}
.pink-class:hover {
    opacity: 1;
}
.pink-class:hover::after {
    --scale: 1;
}



document.querySelectorAll('.pink-class').forEach((elem) => {
	elem.onmouseenter = elem.onmouseleave = (e) => {
        const tolerance = 10;
		const left = 0;
		const right = elem.clientWidth;
		let x = e.pageX - elem.offsetLeft;
		if (x - tolerance < left) x = left;
		if (x + tolerance > right) x = right;
		elem.style.setProperty('--x', `${ x }px`);
	}
});





.pink-class1 {
    text-decoration: none;
    transition: opacity 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
}
.pink-class1::after {
    --scale: 0;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
    border-radius: 0px;
    background: #FBFBFB;
    transform: scaleX(var(--scale));
    transform-origin: var(--x) 50%;
    transition: transform 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
}
.pink-class1:hover {
    opacity: 1;
}
.pink-class1:hover::after {
    --scale: 1;
}



document.querySelectorAll('.pink-class1').forEach((elem) => {
	elem.onmouseenter = elem.onmouseleave = (e) => {
        const tolerance = 10;
		const left = 0;
		const right = elem.clientWidth;
		let x = e.pageX - elem.offsetLeft;
		if (x - tolerance < left) x = left;
		if (x + tolerance > right) x = right;
		elem.style.setProperty('--x', `${ x }px`);
	}
});



.pink-class2 {
    text-decoration: none;
    transition: opacity 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
}
.pink-class2::after {
    --scale: 0;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
    border-radius: 0px;
    background: #efcecd;
    transform: scaleX(var(--scale));
    transform-origin: var(--x) 50%;
    transition: transform 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
}
.pink-class2:hover {
    opacity: 1;
}
.pink-class2:hover::after {
    --scale: 1;
}



document.querySelectorAll('.pink-class2').forEach((elem) => {
	elem.onmouseenter = elem.onmouseleave = (e) => {
        const tolerance = 10;
		const left = 0;
		const right = elem.clientWidth;
		let x = e.pageX - elem.offsetLeft;
		if (x - tolerance < left) x = left;
		if (x + tolerance > right) x = right;
		elem.style.setProperty('--x', `${ x }px`);
	}
});