Custom Numbered List Template

An ordered list that transforms default numbers into large, beautifully styled visual elements.

This template is ideal for recipes, tutorials, or any step-by-step guide where you want the numbering to be a prominent design feature.

A screenshot of an ordered list with large, custom-styled numbers.

Get Source Code Preview

About this Template

This component leverages the power of CSS counters to create a highly stylized ordered list. It starts with a semantic ol element but hides the default numbering. Then, it uses the ::before pseudo-element on each list item to generate and style a custom number, which can be designed independently of the list's text content. This provides enormous creative freedom while maintaining a clean, accessible HTML structure.

Features

Semantic Foundation: Uses a standard ol for a properly structured, numbered list.
CSS Counters: Replaces browser default numbers with completely custom-styled counters generated by pure CSS.
Clean, Modern Design: A minimalist aesthetic with large, visually appealing numbers and clean typography.
Self-Contained: All CSS is scoped to the .custom-numbered-list-template parent class to prevent style conflicts.
Easy Theming: Key design values like colors and fonts are controlled by CSS variables for quick and easy customization.

Code Breakdown

First, on the ol element (classed as .custom-numbered-list), we set list-style: none to remove the default numbers. We also initialize a new counter using counter-reset.

The main part is the rule for the ::before pseudo-element of each li. Inside this pseudo-element, we use counter-increment to increase our counter's value for each item. Then, we use the counter() function inside the content property to display the number. This generated number is then styled with its own font size, color, and positioning to create the final effect.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Numbered List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8fafc;
            color: #334155;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Custom Numbered List Component Styles - Copy from here
           ========================================================================== */
        .custom-numbered-list-template {
            --cnl-font-family: Georgia, serif; /* A more classic font for a "recipe" feel */
            --cnl-primary-text-color: #334155;
            --cnl-secondary-text-color: #64748b;
            --cnl-number-color: #e2e8f0;
            --cnl-bg-color: #ffffff;
            --cnl-border-color: #e2e8f0;
            
            font-family: var(--cnl-font-family);
            color: var(--cnl-primary-text-color);
            width: 100%;
            max-width: 700px;
            background-color: var(--cnl-bg-color);
            border: 1px solid var(--cnl-border-color);
            border-radius: .5rem;
            padding: 2rem;
        }

.custom-numbered-list-template *,
        .custom-numbered-list-template *::before,
        .custom-numbered-list-template *::after {
            box-sizing: border-box;
        }

.custom-numbered-list-template .list-header {
            margin: 0 0 2rem 0;
            padding-bottom: 1.5rem;
            text-align: center;
            border-bottom: 1px solid var(--cnl-border-color);
        }

.custom-numbered-list-template .list-header h2 {
            font-size: 2rem;
            margin: 0 0 0.5rem 0;
            font-weight: normal;
        }

.custom-numbered-list-template .list-header p {
            margin: 0;
            font-style: italic;
            color: var(--cnl-secondary-text-color);
        }

.custom-numbered-list {
            list-style: none; /* Hide default browser numbers */
            padding: 0;
            margin: 0;
            counter-reset: custom-counter; /* Start our counter at 0 */
        }
        
        .custom-numbered-list li {
            counter-increment: custom-counter; /* Increment counter by 1 for each li */
            position: relative;
            padding: 0 0 2rem 5rem;
        }

.custom-numbered-list li:last-child {
            padding-bottom: 0;
        }
        
        /* The custom number created by the counter */
        .custom-numbered-list li::before {
            content: "0" counter(custom-counter); /* Prepend '0' for style */
            position: absolute;
            left: 0;
            top: -0.2em; /* Align number with top of text */
            font-size: 3rem;
            font-weight: bold;
            line-height: 1;
            color: var(--cnl-number-color);
            z-index: 1;
        }
        
        .custom-numbered-list li .step-content {
            position: relative;
            z-index: 2;
        }

.custom-numbered-list li h3 {
            font-size: 1.25rem;
            font-weight: 600;
            margin: 0 0 .5rem 0;
        }

.custom-numbered-list li p {
            margin: 0;
            line-height: 1.6;
            color: var(--cnl-secondary-text-color);
            font-family: system-ui, sans-serif; /* Use a standard UI font for body copy */
        }
    </style>
</head>
<body>

<div class="custom-numbered-list-template">
    <div class="list-header">
        <h2>Brewing Hyper-Specific Coffee</h2>
        <p>A meticulous guide for the morning ritualist.</p>
    </div>

<ol class="custom-numbered-list">
        <li>
            <div class="step-content">
                <h3>Bean Contemplation</h3>
                <p>Acquire a single-origin bean that was sung to sleep by Tibetan monks. Address the bean by its full name and inquire about its day before grinding it to a consistency of fine, volcanic ash.</p>
            </div>
        </li>
        <li>
            <div class="step-content">
                <h3>Water Alignment</h3>
                <p>Collect water from a naturally occurring spring, but only on the third Tuesday of a month with an 'R' in it. Heat it to precisely 93.3Â° Celsius. Any deviation will disappoint the water spirits.</p>
            </div>
        </li>
        <li>
            <div class="step-content">
                <h3>The Bloom</h3>
                <p>Pour a small amount of water over the grounds and allow it to "bloom" for 30 seconds. Use this time to have a brief, one-sided conversation with your reflection about your life's choices.</p>
            </div>
        </li>
         <li>
            <div class="step-content">
                <h3>The Final Pour</h3>
                <p>Slowly pour the remaining water in a counter-clockwise spiral, which is crucial for aligning the coffee's chi. The entire process should take exactly four minutes, no more, no less. Serve in a pre-warmed mug you inherited under mysterious circumstances.</p>
            </div>
        </li>
    </ol>
</div>

</body>
</html>

View Output