Чистый CSS — постоянное состояние в переменных ⇐ CSS

[Anonymous]

У меня есть несколько переменных в моем листе CSS, и я хочу сохранить состояние (это будет число).
Например, я хотел бы создать «почти» бесконечный счетчик оно будет увеличиваться при каждом клике.
Первое, что я попробовал (после некоторых проблем с var и Calc), — это использовать счетчик ключевых кадров с режимом прямого заполнения, но при каждом новом нажатии счетчик был сброс.
Код:

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

@keyframes increment {
from {}
to   { counter-increment: count; }
}

#counter {
counter-reset: count;
}

#counter:active {
animation: increment forwards;
}

#counter::after {
content: "Count: " counter(count);
}

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

Add 1

Я также пробовал использовать флажки и переключатели, которые сработали ( как только элемент получает проверенное состояние, для отображения устанавливается значение «нет» и отображается следующий), но оно было весьма «ограничено» количеством флажков или переключателей.
Тогда я наткнулся на это: https://medium.com/@alexc73/state-in-css-ac57a1ebde09, который использует очень похожий механизм, несмотря на то, что для меня он был довольно глючным (64-разрядная версия Firefox 134.0 в Windows 11).
Последняя часть вопроса касается использования состояния, хранящегося в виде переменной (например, в расчете), но я не нашел способа использовать счетчик в качестве переменная.
Поэтому я хотел бы спросить, сталкивался ли кто-нибудь уже с подобной проблемой и существует ли решение (даже хак).

Подробнее здесь: https://stackoverflow.com/questions/793 ... -variables