Forums

jonnow

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:

item 1
item 2
item 3

  <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

pmac627

text-decoration: underline; Ditch the border-bottom. That will give you the underline, but not dotted.

http://codepen.io/Pmac627/pen/btnLF

Paulie_D

If you want to use a custom image as a bullet point then you're going about it the wrong way (IMO).

Why not use

ul
{
list-style-image:url('image-name.png');
}

Then you can use the dotted bottom border.

Won't that work?

Watson90

@Paulie_D has it right above and it does work;

http://codepen.io/anon/pen/cikDh

Paulie_D

You doubted me! I'm shocked.

:)

Thank heaven it worked....

jonnow

Thanks for that guys. I have a anchor tag wrapped up in the list, so I've hit up the list with the bulleted image then added a border to the bottom of the anchor.

Cheers for the recommendation!

joshuanhibbert

Is this what you are after?

treehouse : what would you like to learn today?

Forums

[Solved] List with background image for bullet and dotted border (only below text)