List bullet images with border under text only

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>

	&lt;style&gt;
	ul {
		list-style: none;
	}

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

Many thanks,

Jonno

There are prolly all sorts of fancy ways to do this, but here’s a simple solution that you might consider:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>List experiment</title>
	
<style media="all">
ul {
	list-style: none;
}

ul li {
	padding-left:20px;
	background: url(sprites.png) no-repeat 0 50%;
}

li span {
	border-bottom:1px dotted black; 
	display: block; 
	padding: 10px 10px 10px 0;}
</style>
	
</head>

<body>

<ul>
	<li><span>item 1</span></li>
	<li><span>item 2</span></li>
	<li><span>item 3</span></li>
</ul>

</body>
</html>

Ahh nice one! I’ll give it a go!

thanks,

Ley us know if it suits you to add in those spans. As I say, I’m sure there are cleverer ways to do this. You could ditch the <span> and add in the bullets with either :before or :after on the <li>s, but meh, then you get issues with older browsers and all that …