[Resolved] Bolding the start of each list

Home Forums Support Bolding the start of each list

  • This topic has 3 replies, 2 voices, and was last updated 3 months ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1334385
    jm1991

    Hey there,

    Is there a way to bold the start of each <li> e.g.

    1. Some text
    2. Some text

    My CSS currently looks like:

    ol li {
        margin: 0 0 0.75em;
        padding: 0 0 0 1.5em;
        margin-left: 32px;
        margin-right: 32px;
    }

    If I add font-weight: bold; then that makes everything wrapped within <li>bold, which is fine in some cases, but not in every case.

    I just want the number to be bold.

    Thanks!

    #1334409
    David
    Staff
    Customer Support

    Hi there,

    couple of methods:

    1. HTML method – your markup would need to be like so:

    <ol>
        <li><span>List item</span></li>
        <li><span>List item</span></li>
    </ol>

    and then you can do this:

    ol li {
        font-weight: bold;
        color: #ff0000;
    }
    
    ol li span {
        font-weight: 400;
        color: #000;
    }

    OR

    2. Pure CSS:

    ol {
        counter-reset: item;
    }
    
    ol>li {
        list-style-type: none;
        counter-increment: item;
        position: relative;
    }
    
    ol>li:before {
        position: absolute;
        left: -1.8em;
        font-weight: bold;
        text-align: right;
        content: counter(item) ".";
    }
    #1334548
    jm1991

    Great. Thanks!

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