I HAVE HTML AND CSS LIKE THIS TO WHICH I WANT TO MAKE DESIGN.

Total Post:88

Points:616
 1302  View(s)
Ratings:
Rate this:
Hi Expert!

How to set red color for number and black color for li content.  ol used for number and li for text content. 
My line of code as following.

CSS

ol li 
{
list-style-type: decimal-leading-zero;
}

HTML

<ol>
<li>One</li>
<li>Two</li>
<li>Three
<ol>
<li>Three.One</li>
<li>Three.Two</li>
</ol>
</li>
<li>Four</li>
</ol>

Please help me! Thanks in advance!
  1. Post:604

    Points:4228
    Re: I have HTML and CSS like this to which i want to make design.

    Hi Jacob!


    <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three
    <ol>
    <li>Three.One</li>
    <li>Three.Two</li>
    </ol>
    </li>
    <li>Four</li>
    </ol>
    The CSS:

    ol li {list-style-type: decimal-leading-zero;}
    ol { counter-reset:li; }
    ol li {
        list-style-type:none;
        counter-increment:li;
        position:relative;
    }
    ol li:before {
        content:counter(li, decimal-leading-zero) ".";
        position:absolute;
        left: -2.6em;
        width: 2em;
        text-align: right;
        color: #f00;
    }

    Hope this helpful for you!

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!