Styles for lists in online documentation

Numbered and unnumbered lists are one of the key elements in any technical documentation, and thus also in any online documentation. A clear and appealing design of the lists is therefore important. With just a few CSS commands, lists and step-by-step instructions can be presented more clearly and more attractively than with the standard functions of many authoring tools.

It is important that for numbered lists, even two-digit numbers are displayed correctly.

Note: To save space and to produce a clear layout, I prefer lists without any left indent. The following examples therefore all set the left margin to 0. If you do not want that, you can adjust the corresponding margin and padding values to your requirements in each case.

Example 1: Custom character used for bullets

The CSS standard settings, such as list-style-type: disc or list-style-type: circle, leave little room for design. However, with a few CSS commands, you can also define any character as a bullet character.

For example, the following list uses an en dash, which is slightly longer and thus more prominent than a simple hyphen.

• Item number 1
• Item number 2
• Item number 3, which has some longer text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu pretium enim. Maecenas consectetur dapibus varius.

  Plus some text in a new paragraph within the list.

Implementation for example 1

Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:

.list-with-character {
  margin-left: 0;
  padding-left: 0;
}
.list-with-character li {
  list-style: none;
  position: relative;
  padding: 3px 0 2px 25px;
}
.list-with-character li::before {
  content: '–';
  position: absolute;
  vertical-align: middle;
  left: 0;
}

To display a list using this style, you or your authoring tool need to assign the appropriate class to the list:

<ul class="list-with-character">
 <li>Item number 1</li>
 <li>Item number 2</li>    
 ...
</ul>  

Tip: If you add a font specification, you can also use characters from a symbol font, such as Font Awesome.

Alternative solution with colored bullets

The bullet characters can also be assigned a color. The following example uses an arrow as the character and a shade of blue for the color:

• Item number 1
• Item number 2
• Item number 3, which has some longer text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu pretium enim. Maecenas consectetur dapibus varius.

  Plus some text in a new paragraph within the list.

The corresponding CSS code looks as follows:

.list-with-color {
  margin-left: 0;
  padding-left: 0; 
}
.list-with-color li {
  list-style: none;
  padding: 3px 0 2px 25px;
}
.list-with-color li::before {
  content: "→";
  color: #006699;
  display: inline-block; width: 1.75em;
  margin-left: -1.75em
}

To display a list using this style, you or your authoring tool again need to assign the appropriate class to the list:

<ul class="list-with-color">
 <li>Item number 1</li>
 <li>Item number 2</li>    
 ...
</ul>  

Example 2: Numbers without a dot

Every unnecessary pixel makes a page more cluttered. The dots after the numbers in a numbered list are such unnecessary pixels.

In the following list, the standard numbers (with a dot) are replaced by a custom count without a dot. In addition, the numbers are bold to contrast somewhat better with the body text. However, to prevent the numbers from appearing too strong and distracting the eye from the content, they are not black, but gray.

1. Item number one
2. Item number two
3. Item number three, which has some longer text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu pretium enim. Maecenas consectetur dapibus varius.

   Plus some text in a new paragraph within the list.

4. Item number four
5. Item number five
6. Item number six
7. Item number seven
8. Item number eight
9. Item number nine
10. Item number ten

Implementation for example 2

Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:

.numbers-without-dots {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
.numbers-without-dots li {
  display: block;
  margin-bottom: .5em;
  margin-left: 1.5em;
}
.numbers-without-dots li::before {
  display: inline-block;
  content: counter(item) "";
  counter-increment: item;
  width: 1.5em;
  margin-left: -1.5em;
  color: rgb(175,175,175);
  font-weight: bold;  
}

To display a list using this style, you or your authoring tool need to assign the appropriate class to the list:

<ol class="numbers-without-dots">
 <li>Item number 1</li>
 <li>Item number 2</li>    
 ...
</ol>  

Example 3: Large numbers that work as an eye-catcher

If you want to highlight step-by-step instructions in your online documentation, you can make the numbers particularly eye-catching and visually set them off from the body text by size and color.

Eye-catching numbers are also useful if the descriptions of the individual steps are very long and consist of multiple paragraphs. Users will then find it easier to relate the content to the respective step when reading.

1. Item number one
2. Item number two
3. Item number three, which has some longer text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu pretium enim. Maecenas consectetur dapibus varius.

   Plus some text in a new paragraph within the list.

4. Item number four
5. Item number five
6. Item number six
7. Item number seven
8. Item number eight
9. Item number nine
10. Item number ten

Implementation for example 3

Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:

.standout {
  list-style: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}
.standout li {
  position: relative;
  margin-bottom: 20px;
  padding-left: 45px;
}
.standout li:before {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  background-color: #006699;
  border-radius: 50%;
}

To display a list using this style, you or your authoring tool need to assign the appropriate class to the list:

<ol class="standout">
 <li>Item number 1</li>
 <li>Item number 2</li>    
 ...
</ol>  

Alternative designs

You can also vary the style:

• For example, to use a square or a rounded square instead of the circle, vary the value of the border-radius property.
• For example, to not use any background color at all, but to just display large, possibly colored digits, change the color specifications accordingly.

Example 4: Image used as a bullet

You can also use an image as a bullet, such as a scalable graphic in SVG format. For example, you can leverage this to lay out a checklist:

• First item
• Second item
• Third item

Implementation for example 4

Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:

Note that you may need to adjust the path and the name of the image.

.checklist {
  list-style: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}
.checklist > li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 35px;
  font-size: 16px;
}
.checklist > li:before {
  content: "";
  counter-increment: item;
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  background-image: url("YOUR-PATH/square.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

To display a list using this style, you or your authoring tool need to assign the appropriate class to the list:

<ul class="checklist">
 <li>Item number 1</li>
 <li>Item number 2</li>    
 ...
</ul>  

Example 5: Arrangement as a grid

In some cases, an arrangement of the steps as a grid may also be useful. If the window becomes smaller or wider, the grid adapts automatically.

Implementation for example 5

Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:

.gridcontainer {
  max-width: 75rem;
  margin: auto;
 }
div.gridcontainer ol {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-gap: 64px;
  grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
  counter-reset: n;
  padding: 0;
} 
div.gridcontainer li {
  list-style: none;
  &:before{
   font-weight: bold;
   content: counter(n);
   counter-increment: n;
   float: left;
   font-size: 3rem;
   line-height: 1.2em;
   padding-right: 0.4em;
   padding-left: 0.1em;
   margin-top: -0.25em;
   transform: translateY(0.2em);
  }
}

To display a list in this style, include the list in the following <div> tag:

<div class="gridcontainer">
...
</div>