Add point in the numbering of the title and add numbering in the sub-title of the ordered list

Navigation
1

I would like to know where I'm going wrong in my css code, as I'm trying to put a dot in the sorted list title, eg:

  • Title

    • And also add subtitle to it:

  • Title

    1.1 Subtitle

    • But when I see the test, it is not adding the point in the numbering of the Title, thus:

    1 Title

    Where the sub title works normal.

    Css code: 

     ol {
        counter-reset: section;               
        list-style-type: none;
    }

    li::before {
        counter-increment: section;            
        content: counters(section, ".") " "; 
    }

    .custom-counter {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .custom-counter li {
        counter-increment: step-counter;
    }

    .custom-counter li::before {
        content: counter(step-counter)'.';
        margin-right: 5px;
    }

    HTML code: 

    <div class="col-sm-50" style="margin-bottom: 30px;">
        <textarea required="" type="text" class="form-control" name="comentarios">
        <ol class="custom-counter">
                <li><b>RESUMO DE ATIVIDADES</b></li>
                <li><b>COMENTÁRIOS</b></li>
        </ol>
        </textarea>
</div>

    Remembering that, it does not have a subtitle in the code above because I'm working with CKEditor, where after I give a line break in the title within the text editor, it automatically adds a subtitle

    Sample image:

        
    asked by anonymous 23.02.2018 / 16:52

    1 answer

    0

    You have to "start" Counter on all <ol> , and remove the default value from the Sorted List. Then in% w / w you increment% w / w% w /% w / w% of list

    I basically just removed these two classes <li> and Counter from your CSS and it already worked.

      

    I left the comments in the CSS code

    See the example. (I just removed Content from your code to make it easier to see) 

    ol {
    counter-reset: section;  /* valor da inicial 1 */             
    list-style-type: none;   /* remove o valor default da <ol> */ 
}

li::before {
    counter-increment: section; /* inicia uma nova contagem com o valor 1 */          
    content: counters(section, ".") " ";  /* coloca antes do 1 o valor do pai */
}

.custom-counter {
    margin: 0;
    padding: 0;
    list-style: none;
}
    <div class="col-sm-50 " style="margin-bottom: 30px;">
    <!-- <textarea required="" type="text" class="form-control" name="comentarios"> -->
    <ol class="custom-counter">
        <li><b>RESUMO DE ATIVIDADES</b>
            <ol class="custom-counter">
                <li><b>SUB ATIVIDADES</b></li>
                <li><b>SUB ATIVIDADES</b></li>
            </ol>
        </li>
        <li><b>COMENTÁRIOS</b>
            <ol class="custom-counter">
                <li><b>SUB COMENTÁRIOS</b></li>
                <li><b>SUB COMENTÁRIOS</b></li>
            </ol>
        </li>
    </ol>
    <!-- </textarea> -->
</div>

    Here you can read more about .custom-counter li link

    p>     
    23.02.2018 / 19:28
    Cros Origin + Spring + Angular 4/5 LCK_M_IX in SQL Server database