Почему зачеркивание удаляется из задачи при наведении на нее курсора?

Question

Я создал простое веб-приложение со списком дел с использованием Vue JS и разработал его с помощью Bootstrap. Когда я добавляю задачу и отмечаю ее выполненной, я добавляю к ней класс, чтобы выполнить ее. Но при наведении курсора мыши на задачу зачеркивание удаляется. Почему это происходит?

Вот ссылка на код, https://codepen.io/Nik96/pen/GzJxeP

<sample code to ignore>
    Because StackOverflow wouldn't let me post the question otherwise
</sample code to ignore>

Answer 1

Это происходит потому, что для элемента li установлено следующее свойство (может быть по умолчанию).

list-group-item:hover {
    z-index: 1;
    text-decoration: none;
}

Это удаление вашей собственности text-украшение: сквозное

Вы можете использовать text-художественное оформление: сквозной! Важный для временного хранения, чтобы ваше свойство не было перезаписано.

Обновлена ​​ссылка на кодовую ссылку ниже

https://codepen.io/anon/pen/KJpRqN