Hey guys,

Can anyone help me out here, I've got a pretty standard unordered list with some icons I want as the bullet points.
I've added the bullet images through the css, but I also want to have a dotted line under the **text** of each of the list items.

The problem is I can either have the bullet images without the border, or have the border underlining both the bullet image and the text which does not look right.

Is there a way to get the border under the text only?

I was thinking something like this:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

<style>
ul {
list-style: none;
}

ul li {
padding:10px;
background: url(sprites.png) no-repeat -30px 0;
border-bottom:1px dotted black;
}
</style>

Many thanks,

Jonno