Get a free trial // Grow your CSS skills // Land your dream job

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

  • # November 26, 2012 at 6:36 am

    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

    Many thanks,


    # November 26, 2012 at 7:42 am

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

    # November 26, 2012 at 8:04 am

    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


    Then you can use the dotted bottom border.

    Won’t that work?

    # November 26, 2012 at 8:19 am

    @Paulie_D has it right above and it does work;

    # November 26, 2012 at 9:28 am

    You doubted me! I’m shocked.


    Thank heaven it worked….

    # November 26, 2012 at 10:14 am

    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!

    # December 3, 2012 at 6:31 pm

    Is this what you are after?

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed