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,

    Jonno

    # November 26, 2012 at 7:42 am

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

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

    # 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

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

    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;

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

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

*May or may not contain any actual "CSS" or "Tricks".