CSS - LI Type Color

by Michael Mandarino

HTML

<ol>
    <li>hello</li>
    <li>dsasgd</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam felis tortor, sagittis at placerat nec, auctor at turpis. Suspendisse tincidunt semper tellus sed placerat. Phasellus ultrices accumsan fermentum. Maecenas ut ornare felis, ac tincidunt
        elit. Ut dapibus at urna sed gravida. Pellentesque elementum suscipit malesuada. Ut nec rhoncus libero. Cras suscipit mi quis ipsum tempor vehicula. Nulla semper ut ipsum eu fermentum. Duis tempor feugiat ultricies. Donec eu tempor urna. Proin
        convallis nunc eget sem porta, id lacinia quam aliquam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus blandit condimentum dolor, ut faucibus quam consectetur et.
        <ol>
            <li>Family</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam felis tortor, sagittis at placerat nec, auctor at turpis. Suspendisse tincidunt semper tellus sed placerat.</li>
        </ol>
    </li>
    <li>asggsdg</li>
</ol>

SCSS

ol {
    counter-reset: li;
    font-size: 1.25rem;
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    padding-left: 2em; // match (li:before margin-left) and (li:before width)
    
    > li {
        counter-increment: li;
        margin-bottom: 1em;

        &::before {
            color: orange;
            content: counter(li)".";
            display: inline-block;
            font-weight: bold;
            margin-left: -2em; // match (ol padding-left) and (li:before width)
            width: 2em; // match (ol padding-left) and (li:before margin-left)
        }
        
        ol {
            margin: 0;
            margin-top: 1em;
            
            > li {
                counter-increment: chapter;
                &::before {
                    color: blue;
                    content: counter(chapter, lower-alpha)".";
                }
            }
        }
        ul {
            margin: 0;
        }
    }
}