Nested counters example

by Richard Hunter

HTML

<section class="container">
    
<h1>Nested Counters</h1>

    
<h2>my counter</h2>

    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut e Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut e
         <h2>header</h2>

        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut e Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut e</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut e Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut e</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut e Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut e
             <h2>header</h2>

            <div>jdkfjdfkd j</div>
            <div>jdkfjdfkd j</div>
        </div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut e Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut e
             <h2>header</h2>

            <div>jdkfjdfkd j</div>
            <div>jdkfjdfkd j</div>
        </div>
    </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut e Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut e
   ...

SCSS

.container {
    padding : 50px;
}
h2 {
    counter-reset : mycounter;
}
div {
    counter-increment : mycounter;
    margin-left : 20px;
    margin-top : 10px;
    position : relative;
}
div:before {
    content : counters(mycounter, ".")"   ";
    color : red;
    position : absolute;
    right : 100%;
    top : 0;
    margin-right : 10px;
}