list item with asterix

Question

is it possible to increment asterixes in a ordered list ? So if I have something like

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

that would show up on my page as follows

*   item 1
**  item 2
*** item 3

using css ?

Answer 1

You can, but you'd have to un-style the list (list-style:none) and use the "before:" pseudo class to absolutely-position your asterisk, combined with n-th child to set the number of asterisks.

Something like this, but you'll have to tweak it a bit.

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: "**" 
}