html liste mit stars / sternchen

[schildi]

hallo,

ich habe eine liste erstellt die so etwas abbilden soll:

*  meine erste fussnote, auch über mehrere zeilen möglich
** meine zweite fussnote, auch über mehrere zeilen möglich
[u.s.w.]

soweit geht das auch, bloß müsste ich bei dieser lösung immer noch für jeden listenlänge eine extra css-definition ablegen. immerhin benötige ich mit dieser lösung nur 1 bild (sieht so aus: * )

die momentane formatierung passt nur auf genau 2 einträge, mit dem ersten listenpunkt * und dem zweiten listenpunkt **.

vielleicht hat jemand eine idee, wie man das ganze auch so umsetzen kann, dass sich die liste automatisch anpasst, je nach dem wie viele sternchen, bzw. listenpunkte man maximal verwendet?

CSS-CODE:

  
#content .footNoteList  
{  
 color: #666666;  
 font-size: 70%;  
}  
  
#content .footNoteList ul  
{  
 padding:0 0 0 3px;  
}  
  
#content .footNoteList ul li  
{  
 background-image: url(../img/list_star_666666.gif);  
 background-repeat: repeat-x;  
 background-position: 0px 0px;  
 padding-left: 15px;  
 margin: 3px 0 3px 0;  
}  
  
#content .footNoteList ul li div.first  
{  
 background-color:#FFFFFF;  
 margin-left:-10px;  
 border-left:7px solid #FFFFFF;  
}  
  
#content .footNoteList ul li div.second  
{  
 background-color:#FFFFFF;  
 margin-left:-5px;  
 border-left:2px solid #FFFFFF;  
}  

HTML-CODE:

  
<div class="footNoteList">  
 <ul>  
  <li>  
   <div class="first">meine erste star-fussnote mit einem sternchen</div>  
  </li><li>  
   <div class="second">meine zweite star-fussnote mit zwei sternchen</div>  
  </li>  
 </ul>  
</div>