[Resolvido] Estilização de UL e LI

Boa tarde!

Meu problema é o seguinte:

Na pagina princinpal tem uma parte de "Ultimas Noticias".

Minha duvida é se tem como fazer o texto dentro da "Bola Vermelha" ser texto e não imagem, pq nesse modelo eu estou usando 3 fotos separadas. O problema é quando tiver 50 noticias, eu vou ter que colocar 50 fotos diferentes!

Obrigado pela ajuda. :)

HTML:

 <div id="latest-news" class="grid_4">
 <h2>Latest News</h2>
 <ul>
 <li class="list-news sep-second">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</li>
 <hr />
 <li class="list-news august-nineteen">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</li>
 <hr />
 <li class="list-news august-twentytwo">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</li>
 </ul>

 </div><!-- /grid4 -->
 </div><!-- /container_12 -->

CSS:

#content-index hr{

height: 1px;
background-color:#555;
width:90%;
margin: 0 auto 20px auto;
}
.list-news{
height:85px;
padding: 0 0 0 80px;
}
.sep-second{
background:url(../images/02sep.png) no-repeat 0% 0%;
}
.august-nineteen{
background:url(../images/19aug.png) no-repeat 0% 0%;
}
.august-twentytwo{
background:url(../images/22aug.png) no-repeat 0% 0%;
}

Foto:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img835.imageshack.us/img835/2244/capturekrr.th.png&key=2a21c2bcf177464456a7d30814e927cea04ec259405363ea7764a67345446bb6" alt="capturekrr.th.png" />

Uploaded with ImageShack.us