Эффект при наведении на элемент в Zero-блоке

Мы привыкли, что при наведении на ссылку появляется подчёркивание. А в Zero-блоке даже этого нет, если выставить текстовому элементу ссылку в настройках. А что, если подчеркивание не просто будет появляться, но и станет цветным или градиентным, а также анимированным — появление подчёркивания начнётся в том месте, в котором вы навели мышкой на элемент?

Хм. А если подумать, то можно не только подчёркивание сделать, но и заливку всего элемента. Сложно представить… проще показать! Поэтому листайте в самый низ страницы и попробуйте навести на каждый элемент.

Если вы всё поняли, то вот простая инструкция:
  1. Задайте элементу Zero-блока класс и впишите этот класс в настройки ниже.
  2. Выберите остальные опции.
  3. Скопируйте код и вставьте его в блок T123 под Zero-блоком.
<!-- Эффект при наведении на элемент в Zero-блоке | https://necodim.ru/tilda/zero-element-hover -->
<style>
.my-class {
    text-decoration: none;
    transition: opacity 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
}
.my-class::after {
    --scale: 0;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 3px;
    border-radius: 5px;
    background: linear-gradient(135deg, #ffcc00, #ca1a2b);
    transform: scaleX(var(--scale));
    transform-origin: var(--x) 50%;
    transition: transform 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
}
.my-class:hover {
    opacity: 1;
}
.my-class:hover::after {
    --scale: 1;
}
</style>

<script>
document.querySelectorAll('.my-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`);
	}
});
</script>
Результат применения эффекта
Наведи на любой из элементов, чтобы увидеть модификацию в действии.
Много текста, но не смотря на это тут будет только подчеркивание всего элемента, чтобы вы могли увидеть разницу
Made on
Tilda