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:
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>

	ul {
		list-style: none;

	ul li {
		background: url(sprites.png) no-repeat -30px 0;
		border-bottom:1px dotted black;

Many thanks,


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">

<meta charset="utf-8">

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

ul li {
	background: url(sprites.png) no-repeat 0 50%;

li span {
	border-bottom:1px dotted black; 
	display: block; 
	padding: 10px 10px 10px 0;}


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


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


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 …