Triangular List Bullets

ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}
li:before { 
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}

Comments

  1. User Avatar
    Endy
    Permalink to comment#

    tricks are very impressive,,,
    but I greatly admire the comments .. suppose blogspot platform can be like this …

  2. User Avatar
    Doug T
    Permalink to comment#

    Now… how do I make them rotate downward when the menu/list items expand? Preferably sans-jquery… CSS only.

    • User Avatar
      Janos Janecki
      Permalink to comment#

      I saw an example, you’re talking about, here http://www.artlebedev.ru/tools/technogrette/html/treeview/

    • User Avatar
      Janos Janecki
      Permalink to comment#

      In your case you may try to hide related ul content and display it on hover (using css) and rotate triangle by using

      li:hover:before {
          border-width: 0.45em 0.35em 0 0.35em ;
      }

      Maybe transitions will also be helpfull, I dunno.

    • User Avatar
      Sean Erdrich
      Permalink to comment#

      Here’s a bit of tweaking I did really quickly… I tried a few things and couldn’t find an efficient way to animate the transform for when the hover starts and ends. I suppose if you used javascript you could do something like that, but this snippet is pure css.

      
      <ul>
           <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                <div>This is visible when the &lt;li&gt; is hovered over.</div>
           </li>
           <li>Aliquam tincidunt mauris eu risus.</li>
           <li>Vestibulum auctor dapibus neque.</li>
      </ul>
                 
      

      Partnered with this:

      
      ul {
          margin: 0.75em 0;
          padding: 0 1em;
          list-style: none;}
      	
      
      li:before { 
          content: "";
          border-color: transparent #111;
          border-style: solid;
          border-width: 0.35em 0 0.35em 0.45em;
          display: block;
          height: 0;
          width: 0;
          left: -1em;
          top: 0.9em;
          position: relative;
      	-webkit-transition:all 0.15s linear;
      	-moz-transition:all 0.15s linear;
      	-o-transition:all 0.15s linear;
      	transition:all 0.15s linear;}
      
      
      ul li div{
      	height:0px;	/*	You could use negative positioning too	*/
      	opacity:0;
      	transition:all .3s ease-in-out;
      	-webkit-transition:all .3s ease-in-out;
      	-moz-transition:all .3s ease-in-out;
      	-o-transition:all .3s ease-in-out;
      	transition:all .3s ease-in-out;}
      	
      	
      ul li:hover div{
      	height:20px;
      	opacity:1;}
      	
      	
      ul li:hover:before{
      	-webkit-transform:rotate(90deg);
      	-moz-transform:rotate(90deg);
      	-o-transform:rotate(90deg);
      	transform:rotate(90deg);}
      
      
  3. User Avatar
    Javi Sola
    Permalink to comment#

    Awesome trick. However, here we go, IE 7 does not show the triangle bullets, is there a workaround band-aid approach to this (hack)?

    • User Avatar
      Rick Lecoat
      Permalink to comment#

      Javi: IE7 does not support the :before and :after pseudo elements.

      I was going to suggest using the Selectivizr script which adds a lot of CSS3 selector functionality to IE 6-8, but it does not support those pseudo elements either. Apparently this is because :before and :after cause changes to the DOM which might cause some of Selectivizr’s other functionality to fail.

      So, unless someone else has a clever workaround, I guess your only option is to feed IE7 a separate rule via conditional comments, perhaps using background images as list markers.

    • User Avatar
      Sean Erdrich
      Permalink to comment#

      Here’s a working (if somewhat lengthy) method:

      CSS:

      
      ul {
          margin: 0.75em 0;
          padding: 0 1em;
          list-style: none;}
      	
      	
      ul li span.bullet{
      	content: "";
          border-color: transparent #111;
          border-style: solid;
          border-width: 0.35em 0 0.35em 0.45em;
          display: inline-block;
          height: 0;
          width: 0;/*
          left: -1em;
          top: 0.9em;*/
          position: relative;
      	left:-5px;}
      
      
      ul li div{
      	height:0px;	/*	You could use negative positioning too	*/
      	opacity:0;
      	margin-left:8px;
      	transition:all .3s ease-in-out;
      	-webkit-transition:all .3s ease-in-out;
      	-moz-transition:all .3s ease-in-out;
      	-o-transition:all .3s ease-in-out;
      	transition:all .3s ease-in-out;}
      	
      	
      ul li:hover div{
      	height:20px;
      	opacity:1;}
      	
      	
      ul li.dropdown:hover span.bullet {
      	-webkit-transform:rotate(90deg);
      	-moz-transform:rotate(90deg);
      	-o-transform:rotate(90deg);
      	transform:rotate(90deg);}
      
      

      HTML

      
      
      <ul>
               <li class="dropdown">
                  <span class="bullet"></span>
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                        <div>This is visible when the &lt;li&gt; is hovered over.
      </div>
      
      
                  </li>
                        <li><span class="bullet">
                              </span>Aliquam tincidunt mauris eu risus.</li>
      
      
      
      
                  </li>
                        <li><span class="bullet">
                              </span>Aliquam tincidunt mauris eu risus.</li></ul>
      
      
  4. User Avatar
    Josh W
    Permalink to comment#

    In Firefox (18.0.1) this was leaving a yucky dark grey outline/aliasing around the triangle. This is much more noticeable when you are using a colored bullet, rather than the black in this example. In Chrome it looked fine.

    I found a fix, which is to use an RGBA value for the border background color, with an RGB more closing matching the background color. Transparent “isn’t really transparent” where diagonals and anti-aliasing are concerned:
    Fixed (on white BG): border-color: rgba(255,255,255,0) #e45900;

  5. User Avatar
    Wil T
    Permalink to comment#

    This was an incredibly helpful tutorial. I’m interested in making the triangles only appear where I actually have a drop down menu. I can’t figure out how to suppress them on a list item that doesn’t have a sublist. I have figured out how to suppress the triangles on the sublists themselves though. Extra code pasted below:

    sidebar ul li ul li:before{
    border: none;
    }

    • User Avatar
      Wil T
      Permalink to comment#

      I figured it out. Just had to create a new class to suppress the arrow.

      ul li.no_carrot:before{
      border-width: 0;
      }

  6. User Avatar
    Vanessa
    Permalink to comment#

    Sorry to barge in on a very old post, but I figured since I found this article, others might find it too and might think my solution is useful.

    li:before {
    content: "\25B6 \ "; /* caractère ISO 10646 */
    }

    You can use different ascii codes to achieve the result you want. And it’s done.

    • User Avatar
      St.G
      Permalink to comment#

      This was exactly what I was hoping to verify. Thanks for that snippet!

    • User Avatar
      Greg
      Permalink to comment#

      This worked perfectly and is exactly what I was looking for. Thanks!

  7. User Avatar
    Ashok
    Permalink to comment#

    Its Good.

  8. User Avatar
    L David
    Permalink to comment#

    These type of solutions break the UL start attribute, I don’t believe there is an ideal CSS-only approach for this other than an using a background image.

  9. User Avatar
    NextLocal
    Permalink to comment#

    I made a JSBin demo of what you posted here: http://jsbin.com/xusipig/1/edit?css,output

  10. User Avatar
    sabry
    Permalink to comment#

    helpful Thanks ^_^

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag