Tutorial: customizing lists

This tutorial is about how you can customize unordered html lists, with different symbols and even your own icons.

The unordered list:

1
2
3
4
5

<ul class="mylist">
   <li>Element 1</li>
   <li>Element 2</li>
   <li>Element 3</li>
</ul>

I already assigned a class to the list with which I’m going to work from now on.

Different pre-defined symbols:

There are already a few symbols you can use for your list: disc, circle, square, none. These are defined via the list-style-type. For example:

1
2
3

.mylist{
   list-style-type: disc;
}

Use any other symbol:

Instead of using one of the 3 given symbols you can also use any other html symbol. To define those you need to do a bit more though than just define the list-style-type. First you have to define this type as “none” and then you have to add your chosen symbol as content before each list item element:

1
2
3
4
5
6

.mylist{
   list-style-type: none;
}
.mylist li:before{
   content: "+ ";
}

If you want to use special characters, like the ones in the picture on the top, you can’t just type/copy the symbol, but have to use it’s numeric representation which you can look up here. The example with the diamond would be like this:

1
2
3
4
5
6

.mylist{
   list-style-type: none;
}
.mylist li:before{
   content: "\2666  ";
}

When you do it just like that and you have multiple lines for one list element, your text won’t be indented but will start right under the symbol. If you want all lines of text to start at the same position, add the following:

1
2
3
4

.mylist li:before{
   content: "\2666  ";
   margin-left: - 10px;
}

You have to play around with that value a bit so that it fits the width of the symbol.

Make that symbol a different color than the text

For this to work, just add a color to the content you added before the list item:

1
2
3
4
5

.mylist li:before{
   content: "\2666  ";
   margin-left: - 10px;
   color: green;
}

Use an image as a symbol:

Instead of working with the list-style-type, you can also work with the list-style-image. Just enter the URL of the image like this:

1
2
3

.mylist{
   list-style-image: url(example.png);
}

Alternating symbols:

I guess no one will actually want to use this, so I’m showing this just for fun. You can access every list item by their number and also check if their number is even or odd. Using this you could have alternating symbols like in the picture at the top:

1
2
3
4
5
6

.mylist li:nth-child(odd):before{
   content: "\2666  ";
}
.mylist li:nth-child(even):before{
   content: "\2665  ";
}

Feel free to ask questions in the comments.

For more Code & Design Tutorials see this page.