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

Total Post:88

Points:616

 1510  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

Please check, If you want to make this post sponsored

You are not a Sponsored Member. Click Here to Subscribe the Membership.