<!-- Подробнее о модификациях сайта с помощью кода можно узнать на сайте https://heiligenweb.ru/ -->

<!-- ===================== CSS ===================== -->
<style>

/* Корневые переменные (CSS variables) */
:root {
/* Цвет дублирующего текста при наведении */
--SlideTextColor: #1E1E1E;
}

/* Стили для ссылки внутри блока .link-slide */
.link-slide a {
/* Относительное позиционирование нужно для псевдоэлемента ::before */
position: relative;

/* Делаем ссылку строчно-блочным элементом для корректной анимации */
display: inline-block;

/* Плавный переход для трансформации и цвета */
transition: transform 0.3s, color 0.3s;

/* Цвет текста по умолчанию */
color: #1E1E1E;
}

/* Псевдоэлемент, который дублирует текст ссылки */
.link-slide a::before {
/* Абсолютное позиционирование относительно ссылки */
position: absolute;

/* Размещаем дублирующий текст под основным */
top: 100%;

/* Выравниваем по левому краю */
left: 0;

/* Растягиваем на всю ширину ссылки */
width: 100%;

/* Цвет дублирующего текста берётся из переменной */
color: var(--SlideTextColor);

/* Берём текст из атрибута data-content */
content: attr(data-content);

/* Плавное изменение цвета */
transition: color 0.3s;
}

/* Состояние hover и focus для ссылки */
.link-slide a:hover,
.link-slide a:focus {
/* Поднимаем ссылку вверх на 100% её высоты */
transform: translateY(-100%);

/* Меняем цвет текста при наведении */
color: #1E1E1E;
}

/* Цвет дублирующего текста при наведении */
.link-slide a:hover::before,
.link-slide a:focus::before {
/* Синхронный цвет с основным текстом */
color: #1E1E1E;
}

/* Обёртка, скрывающая выходящий за границы текст */
.wrapper-slide-text {
/* Обрезаем всё, что выходит за пределы блока */
overflow: hidden;

/* Делаем обёртку строчно-блочной */
display: inline-block;
}

</style>

<!-- ===================== JS ===================== -->
<script>

/* Запуск кода после загрузки DOM */
$(document).ready(function () {

/* Перебираем все ссылки внутри .link-slide */
$('.link-slide a').each(function () {

/* Сохраняем текущую ссылку в переменную */
var $link = $(this);

/* Получаем текст ссылки и убираем лишние пробелы */
var text = $link.text().trim();

/* Записываем текст в атрибут data-content для псевдоэлемента */
$link.attr('data-content', text);

/* Проверяем, не обёрнута ли уже ссылка */
if (!$link.parent().hasClass('wrapper-slide-text')) {

/* Оборачиваем ссылку в контейнер для скрытия overflow */
$link.wrap('<div class="wrapper-slide-text"></div>');
}
});

});

</script>