Тип ввода отмечен флажком для преобразования с помощью CSS ⇐ Html

[Anonymous]

У меня есть тип ввода с содержимым ">", показанный на рисунке ниже, при нажатии на который раскрывается строка таблицы.


Я использовал тип ввода "флажок", при установке которого я хочу преобразовать ">" для поворота на 90 градусов. Ниже приведен код:

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

input:checked + .tab-label::after {
transform: rotate(90deg);
}

Однако поворот не происходит равномерно. Я перепробовал множество вещей, но так и не смог понять, где допустил ошибку. Обратите внимание, что я не могу использовать JavaScript в соответствии с моими требованиями. Пожалуйста, помогите.
вот скрипт с полным кодом: https://jsfiddle.net/g8nmu09d/1/

Подробнее здесь: https://stackoverflow.com/questions/736 ... -using-css