Smiley face

Styling Bulleted Lists with HTML Codes

Dotted lists are so last century. What you want is arrow dot lists, like this:

First thing we need to do is remove the dot style that is standard.
ul {
  list-style-type: none;
Next we need to use a '::before' selector to put something before the beginning of a li tag, like so:
ul li::before { /* arrow bullets*/
Next thing we should probably do is add a little bit of spice to that old arrow.

ul li::before { 
/* same as before */
  width: 1.5em;
  margin-left: -1.5em;

The crucial line here is the 'margin-left: -1.5em;' and the 'width:1.5em;' these make sure that the arrow is spaced at a good position away from the list content.

Now that we have our arrow looking the way we want, lets make a second one for indented lists. We're going to do what we did before but give the indented li tags a class of "lvl1", and make the margin left slightly smaller.

ul li.indented::before {
/* same as before */
    display: inline-block;
    width: 1.5em;
    margin-left: -.5em;

You can repeat the process and adjust the elements to fit your taste for further indented lists. The 'content: \2192' is an HTML code for the arrow character. You can use these characters to do other fun things like making checklists like so:

For a reference to all the symbols and codes check out toptal.