Jo Phillips

Styling Bulleted Lists with HTML Codes

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

some kick ass list element
a small kickass list element
a smaller kickass list element

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*/
  content:"\2192";  
}

Next thing we should probably do is add a little bit of spice to that old arrow.

 
ul li::before { 
/* same as before */
  font-weight:bold;
  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 */
    font-weight:lighter;
    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:

some boring task ☐
some other boring task ☐
kneeboarding ☑

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

HOME

BLOG

CONTACT

GALLERY

Styling Bulleted Lists with HTML Codes