1

Gostaria de saber onde estou errando no meu código css, pois estou tentando colocar um ponto no título da lista ordenada, exemplo:

  1. Título

E também adicionar sub título para o mesmo:

  1. Título

    1.1 Sub Título

Porém quando vou ver o teste, ele não está adicionando o ponto na numeração do Título, ficando assim:

1 Título

Onde o sub título funciona normal.

Código Css:

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

Código HTML:

<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>

Lembrando que, não possui um subtitulo no código acima pois estou trabalhando com CKEditor, onde após eu dar uma quebra de linha no título dentro do editor de texto, ele adiciona automaticamente um sub titulo

Imagem de exemplo: Imagem

1 Resposta 1

0

Tem que "iniciar" o Counter em todo o <ol>, e remover o valor default da Lista Ordenada. Depois no <li> vc faz o incremento do Counter no Content da lista

Basicamente só removi essas duas classes .custom-counter li e .custom-counter li::before do seu CSS e já funcionou.

Deixei os comentário no código do CSS

Veja o exemplo. (apenas removi o textarea do seu código para ficar mais fácil de ver)

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>

Aqui vc pode ler mais sobre o Counter https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

2
  • Realmente funcionou, o problema é que ao mandar para o CKEditor, ele retira o ponto, exemplo (1. Teste para 1 Teste). 26/02/2018 às 18:35
  • Nesse caso não tenho muito como ajudar. Vc pode tentar pegar o valor de um atributo data e colocar na frente. Tipo assim content: counters(section) attr(data-ponto); e na tag li <li data-ponto="."> Testa e depois me fala se deu certo nunca tentei dessa forma rss mas pode dar certo...
    – hugocsl
    26/02/2018 às 18:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .