Counter Step

  • Hello!

    I’m using this custom CSS for the ordered list.

    /* Lists icon formating*/
    ul, ol {
    margin-bottom: 40px;
    list-style-type: none;
    }
    .counter li {
    counter-increment: step-counter;
    margin-bottom: 10px;
    }
    .counter li::before {
    position: absolute;
    left: 15px;
    content: counter(step-counter);
    font-size: 80%;
    background-color: #F5F5F5;
    color: #EC6F74;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 3px;
    }

    I add the counter class manually on each of my lists.
    However, when typing several paragraphs between the list items, I lose the step sequence and all my list points appears with 1.

    Would you please help me to indicate the new “Start Value”?
    I tried to add several of these variables, but I haven’t been successful.

    Thanks a lot for your help!
    Denise

Viewing 9 replies - 1 through 9 (of 9 total)

  • Hi @denise8a

    To have a better understanding of the issue, may you provide the link to the site in question?

    Hope to hear from you soon. ??

    Thread Starter denise8a

    (@denise8a)

    Thanks Fernando!
    I haven’t publish the post yet.
    But hopefully this image can help to describe my issue better.

    ordered list

    Thanks!!
    Denise

    Hi there,

    can you share a screenshot of the editor with the block selected that you add the counter class too ?

    Thread Starter denise8a

    (@denise8a)

    Hi David!

    Here you go:
    Editor

    Thanks!

    OK so you have multiple list blocks, and the top level of each of them you want to maintainer your custom counter value ?

    Do those top level items with the counter have to be a List ?

    Thread Starter denise8a

    (@denise8a)

    Not necessarily.
    I guess since i was typing on google docs and the incremental step was maintained, I was trying to keep the same structure.

    But no, it doesn’t have to be a list.
    Maybe it’s easier to create another styling for the numbering. ???♀?

    Thanks!
    Denise

    This is one method i have used:

    .single-post .entry-content {
    counter-reset: h2counter;
}

.entry-content h2.counter {
    position: relative;
    padding-left: 40px;
}

.entry-content h2.counter:before {
    content: counter(h2counter);
    counter-increment: h2counter;
    position: absolute;
    left: 0;
    font-size: 80%;
    background-color: #F5F5F5;
    color: #EC6F74;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 3px;
}

    it was originally for any H2 headings that had a class of counter
    You can of course change the heading tag to whatever you need.

    Thread Starter denise8a

    (@denise8a)

    Thanks for your prompt help David!!
    Let me give it a try!

    Thanks!
    Denise

    You’re welcome

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Counter Step’ is closed to new replies.