Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #40995
    jonnow
    Participant

    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

    #115487
    pmac627
    Participant

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

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

    #115491
    Paulie_D
    Member

    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?

    #115494
    Watson90
    Member

    @Paulie_D has it right above and it does work;

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

    #115497
    Paulie_D
    Member

    You doubted me! I’m shocked.

    :)

    Thank heaven it worked….

    #115507
    jonnow
    Participant

    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!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.