Как исправить эффект при наведении?

Question

[MaxKeany]

https://codepen.io/maxstrikanov/pen/RwXJwZe

Подскажите как можно исправить hover эффект. Нужно чтобы эффект применялся только на ширину контетнта
Изначально он скрывается ... А при наведении показывается полностью, и добавляется фон на всю ширину контента

Comments

[Ankhena]

Отличный вопрос, содержащий в себе ответ.
Вы задаете псевдику ширину 100%. Чтобы эта ширина в итоге оказалась по контенту, то и родительский li должен быть не на ширину списка, а по контенту.
А ширина контента это width: fit-content.
Либо за счет свойств родительского флекса.

Ещё, у вас нет никакой анимации и не ясно зачем вообще псевдо, можно просто задать фон для li.

Кстати, в современном мире не нужен спан для стилизации чекбоксов и радио. Из можно задать appearance: none и дальше стилизовать напрямую.
А даже если их по-старинке скрывать, то всяко не через display: none, а доступно с помощью visually-hidden (гуглится)

[MaxKeany]

Ankhena, Спасибо!
Просто проблема еще в том, что при наведении контент выходит за границы блока и фон у элемента ограничивается шириной контейнера
до
после

[Ankhena]

MaxKeany, а и правильно, зачем всю информацию сразу выдавать? Пусть они тратят время на первую часть, а потом будем вносить уточнения.

[Ankhena]

MaxKeany, разбейте фон на две части. Вокруг инаута и лейбла.