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



document.querySelectorAll('.my-text-under').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`);
	}
});