Creating Decorated Ordered Lists With CSS

HTML ordered lists can be incremented in many different languages, but customizing the appearance of the leading numbers in each list item is rather difficult. Formatting the list in an OpenType font and using font-feature-settings to produce a special numbers option is one possibility, but there is an easier method. By using the under-appreciated CSS counters property – usually associated with generating point-numbered lists – we can customize the leading numbers with abandon.

Given a standard HTML ordered list:

<h1>Clarke’s Three Laws</h1>

<ol id="clarke-laws">

<li>When a distinguished but elderly scientist states that something is possible, he is almost certainly right. When he states that something is impossible, he is very probably wrong.

<li>The only way of discovering the limits of the possible is to venture a little way past them into the impossible.

<li>Any sufficiently advanced technology is indistinguishable from magic.

</ol>

We do something rather counter-intuitive, turning off the default appearance of the numbered list and setting up a counter-reset property with a variable (point) while pushing it in from the left:

ol#clarke-laws {

line-height: 1.6;

list-style-type: none;

counter-reset: section;

margin-left: 3rem;

}

Every new list item increments point by 1:

ol#clarke-laws li {

counter-increment: point;

margin-top: 2rem;

}

point is then added back in front of each list item with a pseudo-selector, and customized:

ol#clarke-laws li:before {

content: counters(point,"");

border: 2px solid #000;

border-radius: 50%;

display: inline-block; float: left;

width: 3.5rem; height: 3rem;

text-align: center;

padding-top: .25rem; font-weight: 700;

margin-left: -5rem; margin-right: 1rem;

background: rgba(0,0,0,0.025);

}

Adding Responsive Breakpoints

One of the advantages of this approach is that the point number can be relocated at smaller screen sizes, placing them above each list item:

@media screen and (max-width: 30em) {

ol#clarke-laws{ margin-left: 0; }

ol#clarke-laws li:before { display: block; float: none; margin: 1rem auto; }

}

You can see this behaviour when you narrow the browser window, or look at the page on a mobile device. Inspect the code for decorated ordered lists on CodePen