Анимировать точки маркера второго уровня в режиме скольжения

Я пытаюсь получить второй (нижний) уровень маркеров в io2012 для анимации отдельно от их родительской точки маркера, например:

>* First level animates by itself
  >+ Second level then animates by itself
>* Another first level animates by itself

Я пробовал несколько обходных путей с HTML, например, используя >* вместо >+, пытаясь отложить маркер с помощью <div style="padding-left: 1em">>* Second level animated by itself.

Однако это просто отстутствует от текста, но не указывает точку. Мои эксперименты с <li style="padding-left: 1em">...</li> аналогичным образом не удались.

Если HTML-решение отсутствует, решение включает либо CSS, либо JavaScript?

Ответ 1

Если вы готовы пойти с небольшим взломом обходным путем, мне удалось вставить .fragment в начале абзацев и палитр, которые я хотел оживить (некоторые другие вещи с моими слайдами противоречили ярлыку >-, хотя я до сих пор не понял, что).

В любом случае, это должно сработать, даже если оно немного kludgy.

- .fragment First level animates by itself
    - .fragment Second level then animates by itself
- .fragment Another first level animates by itself

(.fragment добавляет "фрагмент" класса div в следующий абзац или элемент)

Ответ 2

Если вы хотите, чтобы меню суб-уровня увеличивалось, вы можете установить счетчик-инкремент в css, как показано в следующем фрагменте:

ol {
    counter-reset: item
}
li {
    display: block;
}
li:before {
    content: counters(item, ".")" ";
    counter-increment: item
}

<ol>
    <li>one</li>
    <li>two
        <ol>
            <li>two.one</li>
            <li>two.two</li>
            <li>two.three</li>
        </ol>
    </li>
    <li>three
        <ol>
            <li>three.one</li>
            <li>three.two</li>
            <ol>
                <li>three.two.one</li>
                <li>three.two.two</li>
            </ol>
        </ol>
    </li>
    <li>four</li>
</ol>