Jump to content

Underline List Item's Text And Bullet

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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...