item item with asterix

Question

Можно ли увеличить индексы в упорядоченном списке? Так что, если у меня есть что-то вроде

<ol class="ast"> 
<li>item 1</li> 
<li>item 2</li> 
<li>item 3</li> 
</ol> 

, что бы показать на моей странице следующим

*       пункт 1
**     пункт 2
*** Пункт 3

используя css?

Answer 1

Вы можете, но вы должны были бы не-стиль списка (list-style:none) и использовать «до:» псевдо класса абсолютно положения вашой звездочки, в сочетании с n-th ребенком, чтобы установить количество звездочек.

Что-то вроде этого, но вам придется немного подкорректировать его.

ul, li { 
    margin:0; 
    padding:0; 
    list-style:none  
} 

li { 
    padding-left:20px; 
} 

li:nth-child(1):before { 
    content: "*" 
} 

li:nth-child(2):before { 
    content: "**" 
} 

Answer 2

Я не верю, что есть способ справиться с этим для произвольной глубины. Решение Diodeus будет обрабатывать известную максимальную глубину за счет большого количества CSS-кода.

Answer 3

Функция CSS symbols() позволяет создавать нечто похожее на то, что вы ищете.

См. https://developer.mozilla.org/en-US/docs/Web/CSS/symbols.

Примером является стилем списка, как:

ol { 
    list-style: symbols(symbolic "*"); 
} 

Хотя приведенным выше код авто-приращение числа звездочек в каждую <li> как то, что вы хотите, количество звездочек растет влево вместо к как ты.

Кроме того, как только вы пройдете мимо определенного количества элементов списка, количество звездочек будет расти за пределами вашего свободного пробела. See this demo for an example of this problem.

Также symbols() в настоящее время поддерживается только в FireFox версии 35 или выше.