Question 233671 in Html Question posted in
Some basic documentation can be found here.

Html – How do i change the list numbers of the ol to look like this

I am trying to make my list numbers look something like this:
Example

this is my current code for this:
CSS:

ul > ol > li::before > li::marker {
    font-weight: 700;
    position: absolute;
    left: 160px;
    content: counter(ol-counter);
    counter-increment: ol-counter;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(13, 89, 85);
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px
}

HTML list:

        <ul>
            <li>
                <ol>                   
                    <li>Bugatti Chiron Supersport 300+</li>
                    <br>
                    <li>Hennessey Venom F5</li>
                    <br>
                    <li>SSC Tuatara</li>
                    <br>
                    <li>Rimac Nevera</li>
                    <br>
                    <li>McLaren Speedtail</li>
                    <br>
                    <li>Koenigsegg Regera</li>
                    <br>
                    <li>Aston Martin Valkyrie</li>
                    <br>
                    <li>Pagani Huayra</li>
                    <br>
                    <li>Lamborghini Aventador SVJ</li>
                    <br>
                    <li>Koenigsegg Jesko Absolut (In theory it should be number 1.)</li>
                </ol>
            </li>
         <ul>

why is this not working?

Tags:

2

Answers


  1. 0

    Your CSS is completely wrong. You´re not changing the style of anything. li::before > li::marker would select the ::marker of an <li>, that is inside of the ::before of an <li>. That makes no sense. I´d suggest you to read this reference on CSS selectors. For example, thats how I would select them in your case, if selecting the ::before and ::marker of each list element in the ordered list was your intention:

    ol li::before, ol li::marker { }
    Login or Signup to reply.
  2. 0

    I tried the below-mentioned code was working for me.

    <style>
    ol {
        counter-reset: section;
    }
    ol li::before, ol li::marker {
        font-weight: 700;
        left: 160px;
        counter-increment: section;
        content: counters(section,".") " ";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: rgb(13, 89, 85);
        color: white;
        border-radius: 50%;
        width: 30px;
        height: 30px
    }
</style>
<ol>                   
    <li>Bugatti Chiron Supersport 300+</li>
    <li>Hennessey Venom F5</li>
    <li>SSC Tuatara</li>
    <li>Rimac Nevera</li>
    <li>McLaren Speedtail</li>
    <li>Koenigsegg Regera</li>
    <li>Aston Martin Valkyrie</li>
    <li>Pagani Huayra</li>
    <li>Lamborghini Aventador SVJ</li>
    <li>Koenigsegg Jesko Absolut (In theory it should be number)</li>
</ol>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search