The implementation method of using CSS counter to beautify the ordered list of numbers

In web design, it is very important to display data in an orderly manner, so that users can clearly understand the data structure and content displayed on the website. Using an ordered list is a way to achieve an organized display of data easy way.

 If you need more in-depth control over the styling of ordered list numbers, you may feel compelled to do so by adding more  html DOM structures or passes  . JavaScriptFortunately,  CSS计数器 this problem can be solved more easily by using .

In this tutorial, we will learn what is  CSS计数器 and some use cases.

ordered list problem

When you write an ordered list like the following, the browser will automatically add numbers in front of the list items

<ol>
    <li>My First Item</li>
    <li>My Second Item</li>
    <li>My Third Item</li>
</ol>

This looks fine, but it doesn't allow you to style the numbers. Suppose, you need to put the numbers before the list into a circle to decorate the list, what should you do?

One way is to remove the list entirely, and manually add the numbers yourself.

<div>
    <span>1</span> My First Item

</div>
<div>
    <span>2</span> My Second Item
</div>
<div>
    <span>3</span> My Third Item
</div>

div {
    margin-bottom: 10px;
}
div span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
}

This is indeed the effect we want to do, but it also has some disadvantages. First, adding numbers manually is cumbersome. If you need to change a number, you have to change them one by one. Faced with this situation, you can use  JavaScript dynamic  <span> labeling to solve these problems, but this will  DOM add more nodes, resulting in a large memory footprint.

In most cases it is better to use CSS counters. Let's see why.

Introduction to CSS Counters

CSS计数器is a page scope variable whose value can be  CSS changed using rules.

First,  counter-reset set the counter using a property. list-number is the variable name used here.

div.list {
    counter-reset: list-number;
}

Next, use the counter-increment property to increment the counter.

div.list div {
    counter-increment: list-number;
}

Now, every time  div.listdiv an element occurs, list-number the variable is incremented by one.

 Finally, display the numbers using a pseudo-element with set  contentproperties and  counter()functions  .:before

div.list div:before {
    content: counter(list-number);
}

Here is the full code:

<div class="list">
    <div>My first item</div>
    <div>My second item</div>
    <div>My third item</div>
</div>

div.list {
    counter-reset: list-number;
}

/** 可以在:before 为元素中使用 counter-increment **/
div.list div:before {
    counter-increment: list-number;
    content: counter(list-number);
}

We're not quite there yet. Let's style the :before pseudo-element to make it look better.

div.list div:before {
    counter-increment: list-number;
    content: counter(list-number);
    margin-right: 10px;
    margin-bottom: 10px;
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background-color: #d7385e;
    border-radius: 50%;
    color: #fff;
}

Modify the starting number

By default, counter-reset the counter is set to 0. When the first one  counter-increment is called it initially becomes 1. The  counter-reset initial value can be set by passing an integer as the second parameter of the function.

div.list {
    counter-reset: list-number 1;
}

If you want to start from  0 the beginning, you can set the initial value to  -1.

div.list {
    counter-reset: list-number -1;
}

change increment value

By default, counter-increment increments the counter by one. Just  counter-reset like, you can define  counter-increment offset values ​​for attributes.

In this example, counter-reset set  list-number to  0.  The value is incremented  each  counter-increment time it is called , so you'll see the list ordered as  , ,  and  .list-number2246

div.list {
    counter-reset: list-number;
}

div.list div:before {
    counter-increment: list-number 2;
    // other styles
}

counter format

counter() A function can have two parameters: counter-name and  counter-format. For the second parameter, you can use any valid list type value, including:

• decimal (eg, 1, 2, 3…)
• lower-latin (e.g., a, b, c…)
• lower-roman (eg, i, ii, iii…)

Default is number.

For example, if you're as scientific as I am, you can use  lower-greek lowercase greek letters for numbered values.

div.list div:before {
    counter-increment: list-number;
    content: counter(list-number, lower-greek);
    // ... other styles
}

counter nesting

When using nested order lists, numbers are always displayed in this format:

If you need the numeric number of the sublist item (for example, 1.1), you can use the with  counters() function  CSS计数器.

<ol>
    <li>
        My First Item
        <ol>
            <li>My Nested First Item</li>
            <li>My Nested Second Item</li>
        </ol>
    </li>
    <li>My Second Item</li>
</ol>

ol {
    list-style-type: none;
    counter-reset: list;
}

ol li:before {
    counter-increment: list;
    content: counters(list, ".") ". ";
}

Note that we are using the counters() function, not the counter() function.

counters() The second parameter of the function is the connection string. It can also have a third argument to set the format (for example, Greek or Roman numerals).

Nested counters with headers

Elements such as  <h1>, <h2> are not nested within the document. They appear as separate elements, but still represent a hierarchy. Here's how to set nested numbers into the title:

body {
    counter-reset: h1;
}

h1 {
    counter-reset: h2;
}

h1:before {
    counter-increment: h1;
    content: counter(h1) ". ";
}

h2:before {
    counter-increment: h2;
    content: counter(h1) "."counter(h2) ". ";
}

Each <h1>time it is found, <h2>the counter is reset. <h2> Get the number and correlate in the document  <h1> .

Browser support

Thankfully, CSS counters  CSS2 have been widely supported by browsers since their introduction with . While using functions in properties other than content  counter() is still experimental, you can perform all the examples covered in this tutorial without hesitation.

a simple challenge

Are you up for a simple challenge involving CSS counters?

Use  the display  to  and its Roman characters  in CSS计数器the line   .1011000

If you're stumped, here's how you can do it:

To create  1000 an  div element, the following can be used.

for (var i = 0; i < 1000; i++) {

    document.body.appendChild( document.createElement("div") );

}

CSS counters:

body {
    counter-reset: number;
}

div:before {
    counter-increment: number;
    content: counter(number) " => "counter(number, lower-roman);
}

in conclusion

CSS counters are a little-known feature in CSS, but you'd be surprised how often they come in handy. In this tutorial, we discussed how and when to use CSS counters and showed some examples.

Below is the list of properties we use.  

Attributes	usage
counter-reset	Reset (or create) the given value counter (default 0)
counter-increment	Increment the given counter by the given offset (default 1)
counter(counter-name, counter-format)	Get the value of the counter from the given format
counters(counter-name, counter-string, counter-format)	Get the value of the nested counter from the given format

 CSS counters are cool though. But one thing to understand is that all counters are global. If you are using in a large project with many CSS files, you may not be able to find where they are created, reset and incremented. Don't overuse them, and always use descriptively named counters to avoid conflicts.

Some practical examples

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS计数器</title>
    <style>
        html {
            box-sizing: border-box;
            font-size: 62.5%;
        }

        *,
        *::before,
        *:after {
            box-sizing: inherit;
        }

        body {
            font-family: Rambla, sans-serif;
            font-size: 2rem;
            line-height: 1.5;
            color: #03c03c;
        }

        h1 {
            text-align: center;
        }

        .wrapper {
            margin: 0 auto;
            width: 85%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-justify-content: space-around;
            -ms-flex-pack: distribute;
            justify-content: space-around;
        }

        @media (max-width: 1100px) {
            .wrapper {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-box-align: center;
                -webkit-align-items: center;
                -ms-flex-align: center;
                align-items: center;
            }
        }

        ol {
            counter-reset: li;
            margin: 20px 0;
            padding-left: 0;
        }

        ol>li {
            position: relative;
            margin: 0 0 25px 2em;
            padding: 4px 8px 4px 20px;
            list-style: none;
        }

        ol>li::before {
            content: counter(li);
            counter-increment: li;
            position: absolute;
            top: -2px;
            left: -2em;
            width: 2em;
            margin-right: 8px;
            padding: 4px;
            font-weight: bold;
            text-align: center;
        }

        li ol,
        li ul {
            margin-top: 6px;
        }

        ol ol li:last-child {
            margin-bottom: 0;
        }

        .disc>li::before {
            color: white;
            background-color: #03c03c;
            border-radius: 50%;
        }

        .circle>li::before {
            color: #03c03c;
            border: solid 2px #03c03c;
            border-radius: 50%;
        }

        .angle>li::before {
            color: #03c03c;
            border-right: solid 3px #03c03c;
            border-bottom: solid 3px #03c03c;
        }

        .shadow>li::before {
            color: white;
            background: #03c03c;
            box-shadow: 5px 5px 0 0 greenyellow;
        }

        .rombo>li {
            margin-bottom: 25px;
        }

        .rombo>li::before {
            color: white;
            z-index: 2;
        }

        .rombo>li::after {
            position: absolute;
            top: -2px;
            left: -2em;
            width: 2em;
            margin-right: 8px;
            padding: 4px;
            background-color: #03c03c;
            height: 2em;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            content: '';
            z-index: 1;
        }

        .underline>li::before {
            border-bottom: solid 3px #03c03c;
        }
    </style>
</head>

<body>
    <h1>Styling Ordered List Numbers</h1>
    <div class="wrapper">
        <ol class="disc">
            <li>Tomato</li>
            <li>Cucumber</li>
            <li>Onion</li>
            <li>Pepper</li>
        </ol>
        <ol class="circle">
            <li>Tomato</li>
            <li>Cucumber</li>
            <li>Onion</li>
            <li>Pepper</li>
        </ol>
        <ol class="angle">
            <li>Tomato</li>
            <li>Cucumber</li>
            <li>Onion</li>
            <li>Pepper</li>
        </ol>
        <ol class="shadow">
            <li>Tomato</li>
            <li>Cucumber</li>
            <li>Onion</li>
            <li>Pepper</li>
        </ol>
        <ol class="rombo">
            <li>Tomato</li>
            <li>Cucumber</li>
            <li>Onion</li>
            <li>Pepper</li>
        </ol>
        <ol class="underline">
            <li>Tomato</li>
            <li>Cucumber</li>
            <li>Onion</li>
            <li>Pepper</li>
        </ol>
    </div>
    <a href="https://css-tricks.com/custom-list-number-styling/">更多例子</a>
</body>

</html>

More excellent cases

CSS Counters for Custom List Styling | CSS-Tricks - CSS-Tricks