All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

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

    This reply has been reported for inappropriate content.

    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