Supun Kavinda
May 12, 2020 ⋅ 4 min read

Styling numbered lists with CSS counters

Supun Kavinda I started as a self-taught PHP developer before creating my own company, Hyvor. I am particularly interested in physics and machine learning.

Recent posts:

Using Signaldb With React

Using SignalDB with React: A complete guide

SignalDB enables automatic data synchronization between your components and a local in-memory or persistent database.

Antonello Zanini
Feb 20, 2024 ⋅ 6 min read
Guide To Next Js Layouts And Nested Layouts

A guide to Next.js layouts and nested layouts

Understanding how layouts, nested layouts, and custom layouts work in Next.js is crucial for building complex, user-friendly projects.

Ibadehin Mojeed
Feb 19, 2024 ⋅ 12 min read
Extracting YouTube Video Data With OpenAI And LangChain

Extracting YouTube video data with OpenAI and LangChain

Extract YouTube video data using OpenAI and LangChain for quick, cost-effective insights without watching the videos.

Carlos Mucuho
Feb 16, 2024 ⋅ 9 min read
How To Use Css Variables Like A Pro

How to use CSS variables like a pro

By building these four simple projects, you’ll learn how CSS variables can help you write reusable, elegant code and streamline the way you build websites.

Idorenyin Obong
Feb 15, 2024 ⋅ 15 min read
View all posts

4 Replies to "Styling numbered lists with CSS counters"

  1. You cannot just get rid of semantics and splash divs everywhere nilly-willy. That’s not how HTML works.

  2. One of the problems here is getting everything to line up nicely and work when using paragraphs that wrap in smaller screens. Solution: Apply the before pseudo class to a span element as follows:
    The thinking is done for you. You don’t have to worry about logistics at all.
    Wrap the li content in a div to be able to apply top padding if preferred:

    ol.numbered-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: list-number;
    ol.numbered-list li {
    counter-increment: list-number;
    margin-bottom: 7px;
    display: flex;
    width: 90%;
    vertical-align: middle;

    ol.numbered-list span {
    display: inline-block;
    vertical-align: middle;
    ol.numbered-list div {
    display: inline-block;
    vertical-align: middle;
    padding-top: 4px;

    ol.numbered-list li span:before {
    content: counter(list-number);

    margin-right: 10px;
    background-color: #0191C8;
    border-radius: 50%;
    color: #FFF;
    width: 2rem;
    height: 2rem;
    padding-top: 0.3rem;
    display: inline-block;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;

Leave a Reply