[Resolved] Stylize the ordered list and unordered list

Home Forums Support Stylize the ordered list and unordered list

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1328079
    Rohan Verma

    Hello Team,
    How can I get an ordered list even ordered list like this:https://prnt.sc/szvms5. Like the circle numbering and vertical line

    #1328396
    David
    Staff
    Customer Support

    Hi there,

    the Site you provided a link for uses this CSS:

    .entry-content ol {
        counter-reset: li;
    }
    
    ol {
        list-style: decimal;
    }
    
    .entry-content ol li {
        position: relative;
        margin: 0 0 .5rem 1.03rem;
        padding: 4px 1.1rem .3rem 1.5rem;
        list-style: none;
        border-left: .5px solid #073042;
    }
    
    .entry-content ol>li:before {
        content: counter(li);
        counter-increment: li;
        position: absolute;
        top: 0;
        left: -1.2em;
        box-sizing: border-box;
        margin-right: 8px;
        display: block;
        font-size: .9rem;
        padding: 7px;
        width: 2.1rem;
        height: 2.1rem;
        line-height: 1.3;
        text-align: center;
        font-weight: 500;
        border: .5px solid #15C77C;
        background: #15C77C;
        color: #fff;
        border-radius: 999em;
    }
    #1328564
    Rohan Verma

    Thanks, David it’s working, now I want same vertical line for the unordered list as well. How to achieve that

    #1329114
    Leo
    Staff
    Customer Support

    Try replacing ol in David’s code with ul

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.