Advertise with us

I have HTML and CSS like this to which i want to make design.

Posted by  jacob rasel
 1621  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. 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