List bullet images with border under text only

**JonnoW** · Nov 26, 2012 05:40

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

**ralph.m** · Nov 26, 2012 05:56

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

Code:

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

**JonnoW** · Nov 26, 2012 06:22

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

thanks,

**ralph.m** · Nov 26, 2012 06:27

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

User Tag List

Thread: List bullet images with border under text only

Thread Tools

Display

List bullet images with border under text only

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions