Jump to content

Underline List Item's Text And Bullet


LukeV
 Share

Recommended Posts

Hello,I'm trying to get this effect with an unordered list:wiw.gifBut instead I am getting this:wig.gifBasically the problem is the border at the bottom does not go under the bullet.Here's the code I'm using.

ul.frontpage_list {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	color: #7f7e7e;	margin-top:20px;	margin-bottom: 30px;	list-style-image: url('images/spade.gif');	padding-left: 18px;	}ul.frontpage_list li{	line-height: 30px;	border-bottom: 1px dotted #555;	}

Anyone know which would be the best way to achieve such an effect?

Link to comment
Share on other sites

If I add that definition then there is no spacing between the bullet and the text in IE. It was the first thing I tried.So I'm guessing I'll have to put in the image of the spade within and <img> next to the text then? It should work but it just doesn't look very neat.

Link to comment
Share on other sites

You can choose to have no list style, so there is no symbol, and just prepend each list item with the image. You can decrease the left offset (or make it negative) to eradicate the space where the list symbol usually would be

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...