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; }That’s a rather old-timey approach. These days you might consider how easy it is to do with ::marker. Here’s both:
tricks are very impressive,,,
but I greatly admire the comments .. suppose blogspot platform can be like this …
Now… how do I make them rotate downward when the menu/list items expand? Preferably sans-jquery… CSS only.
I saw an example, you’re talking about, here http://www.artlebedev.ru/tools/technogrette/html/treeview/
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.
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.
Partnered with this:
Awesome trick. However, here we go, IE 7 does not show the triangle bullets, is there a workaround band-aid approach to this (hack)?
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.
Here’s a working (if somewhat lengthy) method:
CSS:
HTML
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;
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;
}
I figured it out. Just had to create a new class to suppress the arrow.
ul li.no_carrot:before{
border-width: 0;
}
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.
This was exactly what I was hoping to verify. Thanks for that snippet!
This worked perfectly and is exactly what I was looking for. Thanks!
Its Good.
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.
I made a JSBin demo of what you posted here: http://jsbin.com/xusipig/1/edit?css,output
helpful Thanks ^_^
Thank you, but somehow, the line height is increasing to almost double when am using this trick compared to normal bullets… and am just not able to decrease it … you can see here compared with the numbered list : https://www.plarecon.com/implants-biomaterials-plastic-surgery/
Looks like you were able to decrease the size! Well, at least when I checked. I’d imagine that the element was inheriting a larger line height from somewhere else in the cascade, which means it would need to be explicitly defined in this ruleset.