Hello Reader's
In this article I will guide you about the Responsive CSS Counter-Increment. As in example you can see the css counter counting itself.
Here is the example below you can copy & paste the code.

Here is the HTML

 <div class="wrapper">
            <div class="list">
                <ul>
                    <li><a href="javascript:void(0)"><span></span></a></li>
                    <li><a href="javascript:void(0)"><span></span></a></li>
                    <li><a href="javascript:void(0)"><span></span></a></li>
                    <li><a href="javascript:void(0)"><span></span></a></li>
                    <li><a href="javascript:void(0)"><span></span></a></li>
                    <li><a href="javascript:void(0)"><span></span></a></li>
                    <li><a href="javascript:void(0)"><span></span></a></li>
                    <li><a href="javascript:void(0)"><span></span></a></li>
                    <li><a href="javascript:void(0)"><span></span></a></li>
                    <li><a href="javascript:void(0)"><span></span></a></li>
                </ul>
            </div>
        </div>

Here is the CSS

* {
    padding: 0px;
    margin: 0px;
}
body {
    background: #d1d1d1;
}
.wrapper {
    width: 1170px;
    margin: 10px auto;
}
.list li a {
    text-decoration: none;
}
.list ul li {
    display: inline-block;
    margin: 0px 5px;
    position: relative;
    counter-increment: counter;
    margin-bottom: 2em;
}
.list ul li:before {
    position: absolute;
    top: 35px;
    left: 10px;
    color: black;
    content: counter(counter);
}
.list ul li span:before {
    width: 30px;
    height: 30px;
    display: block;
    position: relative;
    content: "";
    background-color: #ff8c00;
    border-radius: 50%;
    border: 2px solid #000;
}

@media (max-width:1170px) {
    .wrapper {
        width: 90%;
    }
}