Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Responsive CSS Counter-Increment

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 521
    Comment on it

    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%;
        }
    }
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: