SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Jul 2002
    Location
    space
    Posts
    845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS List Styling

    Good afternoon,

    I want to add a CSS right-facing triangle as the "bullet" in each list item:

    i.e.
    Code:
    <ul>
    <li><a href="">[triangle] Text (12px)</a></li>
    <li><a href="">[triangle] Text (12px)</a></li>
    <li><a href="">[triangle] Text (12px)</a></li>
    <li><a href="">[triangle] Text (12px)</a></li>
    </ul>
    I would like the triangle to be as crisp as possible and change color on hover with the text.

    I can do this with an image but I was hoping to do something purely CSS-based.

    Thx.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    this should do it:
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style>
    .tlist li {
     list-style:none; 
    }
    .tlist li:before{ content:'\25B6'; float:left; font-size:60%; margin-top:.6em; margin-right:1em; margin-left:-1em}
    .tlist li:hover:before{color:red;}
    .tlist li a{ overflow:hidden; display: block;}
    
    </style>
    </head>
    
    <body>
    <ul class="tlist">
    <li><a href="">Text (12px). much longer text much longer text much longer text much longer text  much longer text </a></li>
    <li><a href="">Text (12px)</a></li>
    <li><a href="">Text (12px)</a></li>
    <li><a href="">TText (12px)</a></li>
    </ul>
    </body>
    </html>
    I have oft wished there was a way to slect a custom list marker in CSS, but there simply isn't one. So we do the next est thing by using the :before pseudo element and some special character codes ( \25B6 = solid right triangle)

    hope that helps

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,608
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Very clever, Ray.

    I've wished for something like this, too.

    Thanks!

  4. #4
    SitePoint Guru
    Join Date
    Jul 2002
    Location
    space
    Posts
    845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! This works for me.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You will need clear:left on the list or it will snag and staircase

    Code:
    .tlist li {
     list-style:none;
    clear:left; 
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •