Code Snippet

Home » Code Snippets » CSS » Triangular List Bullets

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;
}

Reference URL

Subscribe to The Thread

  1. Endy

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

    Reply ↓
  2. Doug T

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

    Reply ↓
    • Janos Janecki

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

    • Janos Janecki

      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.

    • Sean Erdrich

      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. Javi Sola

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

    Reply ↓
    • Rick Lecoat

      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.

    • Sean Erdrich

      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>

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~