Эффект диапазона CSS не работает, когда вы переписываете текст диапазона с помощью JS [дубликат] ⇐ CSS

[Anonymous]

Я создаю эффект с помощью CSS и использую JS, чтобы переписать то, что было в тексте, но это нарушило эффект. Однако без использования JS и простого написания текста в HTML все работает.
Я пробовал использовать element.textContent и element.innerText, но все равно не получилось.Вот что я получил на данный момент:

Код: Выделить всё

let diff = document.querySelector('.button.changed');
diff.textContent = 'CHANGED';

Код: Выделить всё

.button {
width: 75px;
height: 20px;
background: rgba(0, 0, 0, 1);
color: white;
position: absolute;
border-radius: 5px;
cursor: pointer;
transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
top: 175px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}

.button:hover {
transform: scale(1.25);
background: rgba(200, 200, 200, 1);
color: black;
}

.button span {
position: relative;
display: inline-block;
overflow: hidden;
z-index: 1;
}

.button span::before {
content: " ";
position: absolute;
top: 15%;
left: -5px;
width: 15px;
height: 15px;
background-image: linear-gradient(to right, gold, yellow);
transition: left 0.25s linear;
overflow: hidden;
}

.button span:hover::before {
left: 95%;
}

.button span:hover::before,
.button span::before {
opacity: 1;
}

.button span::before {
opacity: 0;
}

.default{
position: absolute;
top: 100px;
left: 100px;
}

.changed{
position: absolute;
top: 200px;
left: 100px;
}

Код: Выделить всё

TEXT
DIFF

Подробнее здесь: https://stackoverflow.com/questions/784 ... xt-with-js