Home > DeveloperSection > Forums > I have HTML and CSS like this to which i want to make design.
jacob rasel
jacob rasel

Total Post:88

Points:616
Posted on    May-09-2013 4:39 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 824  View(s)
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!


AVADHESH PATEL

Total Post:604

Points:4228
Posted on    May-09-2013 8:06 AM

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!

Don't want to miss updates? Please click the below button!

Follow MindStick