CSS List Help; is this even possible?

Discussion in 'Web Design and Development' started by jdl8422, Apr 23, 2008.

  1. jdl8422 macrumors 6502


    Jul 5, 2006
    I am doing a website and I have a list that I am coding. I know how to do a list and have it highlight when I hover over it, but I want something a little different. I have a numbered list, and I want it to highlight just the number with a transparent circle. I attached a pic of it to get a better idea.

    Attached Files:

  2. InLikeALion macrumors 6502a

    Jul 18, 2007
    Greener places than I used to live
    could you give each <li> a specific id, then under the a:hover state rule, change the list-style-image to a gif of the number with circle highlight? It doesn't need to be transparent.
  3. angelwatt Moderator emeritus


    Aug 16, 2005
    Similar to the above post, you could have the circle image without a number in it and use it as a background image for the li tag during a hover (a:hover). This would allow the numbering of the ol to be present on top. The only trouble might be to get it to align properly, and wouldn't necessarily stay where it needs to if the user resizes the text. You at least would only have to create one graphic though.

Share This Page