O text-decoration: line-trought não funciona no meu código

///////////////////////////////////////////////////////// // Reservation

( () => { const createAssignment = (e) => { e.preventDefault()

const listReservation = document.querySelector('[data--list]')
const inputReservation = document.querySelector('[data-form--input]')
const value = inputReservation.value

const assignmentReserv = document.createElement('li')
assignmentReserv.classList.add('task')

const contentReserv = <p class="content">${value}</p>;

assignmentReserv.innerHTML = contentReserv;

assignmentReserv.appendChild(buttonConcluded());
assignmentReserv.appendChild(ButtonDelete());
listReservation.appendChild(assignmentReserv)
inputReservation.value = "";

};

const newReservation = document.querySelector('[data-form--button]');

newReservation.addEventListener('click', createAssignment);

const buttonConcluded = () => { const buttonConcluded = document.createElement('button')

buttonConcluded.classList.add('finish-button')
buttonConcluded.innerText = 'Finish'
buttonConcluded.addEventListener('click', () => {
});

return buttonConcluded;

};

const concluidedAssign = (e) => { const buttonConcluded = e.target

const assignComplete = buttonConcluded.parentElement

assignComplete.classList.toggle('done')

}

const ButtonDelete = () => { const buttonDelete = document.createElement('button')

buttonDelete.innerText = 'Delete'
buttonDelete.addEventListener('click', deleteAssignment)

return buttonDelete;

}

const deleteAssignment = (e) => { const buttonDelete = e.target

const assignComplete = buttonDelete.parentElement
assignComplete.remove();
return buttonDelete;

}

})();

CSS:

.task.done .contentReserv { text-decoration: line-through; }