Creating custom bullets for lists

Lists are a great way to group content in a structured manner. They are typically used to present information in a series of steps, a collection of items or a set of related points. While the appearance of standard lists suffices in many cases, customizing these visual cues can significantly enhance the aesthetics of the design aligning it with a particular design or branding.

In this tutorial, we will explore how to create custom bullets for our lists using some lesser-known CSS selectors and properties. You will learn how to change the bullets of a standard list to diamond shapes matching the cap height of the text and use a custom color.

Scenarios

Before we begin, you will need to create a new print template and add a list using the Create Bulleted List icon on the formatting toolbar. In our example we’ll focus on a few bullet items in a business letter as shown in the image below. Notice how the bullets use the standard black dots.

Replacing standard bullets with an image

The list-style-image property in CSS allows you to replace the default bullet point with an image of your choice. In our example we added an image file called “diamond.svg” to the Images folder located in the Resources panel. The following CSS rule sets this image as the bullet for the list items.

li { 
    list-style-image: url('../images/diamond.svg');
} 

The approach is somewhat limited, changes to the image or color require you to modify the image in the application it was created with.

Custom content

The ::before pseudo-element in CSS is used to insert content before the content of an element. It adds an additional element or text before the actual element without modifying the HTML structure. Let’s have a look at how this technique can be used to create a custom bullet for our lists. Remember it works for all elements so it can be used to prepend paragraphs with a bullet too.

Remove standard bullets

First we need to disable the standard bullet for the list items. This is done with the following CSS:

li { 
    list-style: none;
}

Adding content

In CSS, the content property is used with pseudo-elements (::before and ::after) to insert content before or after the content of an actual element. The content property can take various values like: text strings, special characters like a Unicode escape sequence ("\2022" inserts a standard bullet point and "\25C6" adds a diamond), counters and URLs.

The following CSS adds the text “new” next to the content and applies some styling:

li { 
    list-style: none;
}

li::before {
    content: "new";
    background-color: #F9A132;
    padding: 1px 6px;
    border-radius: 4px;
}

Shapes

The content could also be replaced with a geometric shape like a square or diamond. Note that non latin 1 characters must be encoded using hexadecimal values. These values can be retrieved via sites like unicodelookup.com.

Alternatively simply copy the symbol from unicodelookup.com and paste as value for content property. The following code inserts a solid diamond, applies a slightly bigger font size and changes the position of the symbol using the vertical-align property. In addition some extra properties are applied to the list and list items to beautify the position of the items.

ul {
    padding-left: 1em;
}
li { 
    list-style: none;
    margin-bottom: 0;
}
li::before {
    content: "◆";
    color: #F9A132;
    font-size: 14pt;
    vertical-align: -2px;
}

Unicode emojis

Looking for more? The internal browser also supports Unicode emojis. Sites like unicode.party let you copy unicode emojis which you can add as value for the content property.

In this example we copied the Grinning Cat and added it the content property:

li { 
    list-style: none;
}

li::before {
    content: "😺";
    color: #F9A132;
    font-size: 14pt;
    vertical-align: -2px;
}