Антон Горецкий

Вы можете найти ответ на ваш вопрос здесь, с подробным описанием и расчетами

может вот так попробовать:

.todo-item__span::after {
    position: absolute;
    content: '+';    
    display: inline-block;
    transition: 0.4s ease-in;
    transform: scale(0) translate(-50%, -50%);
    background-color: transparent;
    font-size: 2rem;
}

Gulp не предназначен для работы в браузере и не может в нем работать, поскольку ему нужен доступ к файловой системе. Чтобы его запустить вам нужно установить Node.js, создать папку с проектом и в ней произвести установку нужных пакетов с помощью команды npm install (файл package.json должен быть в этой же папке), либо устанавливая каждый нужный пакет по отдельности. На ютубе полно роликов

Почитай вот это Какие элементы HTML могут получить фокус Твой элемент li не может получить фокус.
Можно сделать такое если добавить чекбокс (невидимый) и стилизовать соседний элемент в зависимости от его состояния.
Иначе, придется javascript подключать.

Если публикуете папку dist, то и покажите ее содержимое. Откуда я могу знать как там собирается проект? Все пути должны соответствовать структуре публикуемого пакета.