CSS Counters

What is the CSS Counters:
CSS counter is the counter increment property of the CSS. counter-reset is mandatory for the counter-increment. counter-increment only work when you will use counter-reset in the parent element.

View demo

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
        .anything {
            max-width: 500px;
            margin: 50px auto;
        }
        .anything ul {
            padding: 0 0 0 80px;
            counter-reset: number;
            position: relative;
        }
        .anything ul::before {
            border-left: 5px solid #ccc;
            content: '';
            position: absolute;
            top: 0;
            left: 68px;
            height: 100%;
            z-index: 0;
        }
        .anything ul li {
            font-size: 16px;
            font-family: 'Arial';
            color: #000;
            line-height: 30px;
            padding-left: 50px;
            position: relative;
            list-style: none;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        .anything ul li::before {
            background: transparent;
            border-top: 5px solid #ccc;
            top: 18px;
            width: 73px;
            border-radius: 0;
            content: '';
            left: -30px;
            z-index: 0;
            position: absolute;
        }
        .anything ul li::after {
            background: #0bf;
            top: 5px;
            color: #fff;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            left: 0;
            counter-increment: number;
            content: counter(number);
            position: absolute;
            font-family: arial;
            border-radius: 50%;
            font-size: 20px;
            font-weight: 700;
        }
        .anything1 {
            max-width: 500px;
            margin: 20px auto;
            counter-reset: area;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
        }
        .anything1 div {
            padding: 10px;
            margin: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .anything1 div::before {
            counter-increment: area;
            content: "Box " counter(area) ": ";
            background: #ccc;
            padding: 5px;
            margin-right: 5px;
            margin-bottom: 5px;
            float: left;
        }
        .anything1 div::after {
            clear: both;
            display: block;
            width: 100%;
            content: '';
        }
    </style>
</head>

<body>
    <div class="anything">
        <ul>
            <li>anything learn as like css html angualr</li>
            <li>anything learn jquery</li>
            <li>anything learn as like css Basic php, anything learn as like css html angualr, anything learn as like css html angualr,anything
                learn as like css html angualr</li>
            <li>How to learn wordpress</li>
        </ul>
    </div>
    <div class="anything1">
        <div>anything learn as like css html angualr</div>
        <div>anything learn jquery</div>
        <div>anything learn as like css Basic php, anything learn as like css html angualr, anything learn as like css html angualr,anything
            learn as like css html angualr</div>
        <div>How to learn wordpress</div>
    </div>
</body>
</html>




No comments:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.