So it’s been months since I’ve updated because I have been so damn busy. Need to add a bunch of new crap to the portfolio and blog about a bunch of fun new projects I have been working on, but in the meantime, here is a quick post about how to style html lists without using images to get custom bullets. I am excited about this because it’s so simple, I am shocked I never thought to do it before. I also love pure CSS solutions.
So you are making a list in your web page and want to use a different type of bullet than the standard disc. So you have to set the list-style-type to “none” and add a background image, right? Not anymore! If the character you want to use for your list bullet is a standard character (some usual suspects: /, >, -, ;, etc), you can just use psuedo-elements in your css to achieve these custom list bullets. For example, if you wanted your list to use “>” as the bullets, you would do the following in your css:
ul { list-style-type: none;}
ul li:before { content: "> ";}
Want to remove that pesky bullet from the first list item (as you may in an in-line list…possibly for breadcrumbs or the like)? Simply do the following:
ul li:first-child:before { content: "";}
And it’s that easy. No idea why I never thought to do that before.