[Resolved] Numbered list styling

Home Forums Support Numbered list styling

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #846734
    Nacho

    Hello,

    How can I style the numbered lists like the image below?

    I´ve been playing a bit with the CSS and the “before” but nothing.

    Thanks a lot for your help.

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #846745
    David
    Staff
    Customer Support

    Hi there,

    try this:

    ol {
        list-style: none !important;
        counter-reset: item;
        margin-left: 0 !important;
    }
    
    ol li {
        counter-increment: item;
        margin-bottom: 5px;
    }
    
    ol li:before {
        margin-right: 10px;
        content: counter(item);
        background: #bbb;
        border-radius: 100%;
        color: white;
        width: 1.2em;
        line-height: 1.2em;
        padding: 2px;
        text-align: center;
        display: inline-block;
    }
    #846770
    Nacho

    Wow,

    That worked like charm and super fast.

    Thanks a lot David and have a nice day.

    #846776
    David
    Staff
    Customer Support
    #906562
    Nacho

    Hi David,

    I´ve just found that the first line has padding but not the second and the ones below them so they look like in a box.

    You can see in the URL of this post.

    Thanks a lot.

    #906796
    David
    Staff
    Customer Support

    Looks like you made some changes to the CSS, so update it to this:

    ol {
        list-style: none !important;
        counter-reset: item;
        margin-left: 0 !important;
    }
    
    ol li {
        counter-increment: item;
        margin-bottom: 5px;
        position: relative;
        margin-left: 40px;
    }
    
    ol li:before {
        margin-right: 10px;
        content: counter(item);
        border-radius: 50%;
        border-top-color: rgb(212, 212, 212);
        border-top-style: solid;
        border-top-width: 1px;
        border-right-color: rgb(212, 212, 212);
        border-right-style: solid;
        border-right-width: 1px;
        border-bottom-color: rgb(212, 212, 212);
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-left-color: rgb(212, 212, 212);
        border-left-style: solid;
        border-left-width: 1px;
        border-image-outset: 0;
        border-image-repeat: stretch;
        border-image-slice: 100%;
        border-image-source: none;
        border-image-width: 1;
        color: #bbb;
        width: 1.2em;
        line-height: 1.2em;
        padding: 2px;
        text-align: center;
        position: absolute;
        left: -40px;
    }
    #906843
    Nacho

    Hi David,

    That worked perfectly.

    Thanks a lot for such a quick reply.

    Have a nice day.

    #906889
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.