How to Style a List (OL/UL) Adding Asterisks (*, **, ***) on the Left Side using CSS

If you want to style a list in CSS to add an increasing number of asterisks on each point—for example, for footnotes—it's possible to achieve this using @counter-style.

Let's see a simple code example of how to do it:

.asterisks {
    list-style: footnote-asterisks;
}

@counter-style footnote-asterisks {
    system: symbolic;
    symbols: "*";
    suffix: " ";
}

The CSS snippet above sets the list-style property of elements with the asterisk class. The style we set is footnote-asterisks, which isn't part of the standard styles we can normally use. In order to use this undefined style, we must first define it using the @counter-style statement.

Observe that we have 3 properties for our custom counter style:

1. symbolic means that the characters in symbols will be repeated as the count goes up.
2. symbols is where we put the symbols that will be repeated.
3. suffix is the text that appears after the counter. The default has a single dot (.), as in 1., 2., 3., and so on. We redefine this property to a space ( ) so there is a space between the asterisks and the items of our footnotes list.

To apply this style, all we need is some HTML like:

<ol class="asterisks">
    <li>First footnote.</li>
    <li>Second footnote.</li>
    <li>Third footnote.</li>
</ol>

And so on.

Documentation

• https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style (accessed 2025-02-24)