Jquery toggle() и CSS :before?

Question

[WDev]

В html имитация checkbox листа посредством списка

<h4>Заголовок</h4>
<ul>
<li>пункт 1
<li>пункт 2
...
</ul>

При нажатии на <li> срабатывает метод toggleClass('checked').
В CSS добавлен li.checked:before{}, который помещает перед пунктом галочку из картинки.
При нажатии на <h4>Заголовок</h4>, следующий за ним <ul> сворачивается (или разворачивается) методом toggle().
НО! Галочки не отрабатывают slideUp и slideDown вместе с пунктами. При сворачивании пунктов они остаются на своих местах и пропадают лишь под конец. Обратно при разворачивании галочки сразу появляются на своих местах, тогда как пункты только разворачиваются.
Как победить?
P.S.
overflow: hidden на li или на ul не работает
Галка из стандартного набора иконок jquery-ui. Помещается в background li.checked:before. Жаль, что background не позволяет задавать размеры вырезаемой из background-image области под одну иконку. Иначе просто поместил бы на li.checked.
Создавать по отдельной картинке на иконку или лепить к li дополнительный элемент с размерами пока не хочется.
Решение простое:
ul{ position:relative }.

Answer 1

[_ _]

Какой-нибудь overflow: hidden на li

Comments

[WDev]

Загорелся идеей. Подумал, что overflow: hidden лучше на ul. Попробовал и так, и так. Не вышло.
Галка из стандартного набора иконок jquery-ui. Помещается в background li.checked:before. Жаль, что background не позволяет задавать размеры вырезаемой из background-image области под одну иконку. Иначе просто поместил бы на li.checked.
Создавать по отдельной картинке на иконку или лепить к li дополнительный элемент с размерами пока не хочется.

[_ _]

@WDev: Вы бы код показали

[WDev]

ul{ position:relative } все лечится

Answer 2

[WDev]

ul{ position:relative }