CODEWITHSUNDEEP
htmlcss
badal
badal

Reputation: 73

CSS Design for order list

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

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>

Now with this above is my HTML and CSS content. As you can see i dont want to use any span element or anchor tag with this order list. So, can i make different color for OL(order list) number and text content of li? I want to make red color for number and black color for li content.

Upvotes: 1

Views: 1426

Answers (6)

Nitesh
Nitesh

Reputation: 15739

Here is the solution.

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;
}
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three
    <ol>
      <li>Three.One</li>
      <li>Three.Two</li>
    </ol>
  </li>
  <li>Four</li>
</ol>

Hope this helps.

Upvotes: 4

laser apple
laser apple

Reputation: 86

ol {
    counter-reset: li;  
    list-style: none;
}

li:before {
    counter-increment: li;                                               
    content: counter(li, decimal-leading-zero)". ";  
    color: red;      
}

or

ol {
  counter-reset: li;  
  list-style: none;
}

li:before {
  counter-increment: li;                                               
  content: counters(li, ".", decimal-leading-zero) ". ";  
  color: red;      
}

or

ol {
  counter-reset: li;  
  list-style: none;
}

li:before {
  counter-increment: li;                                               
  content: "0" counters(li, ".") " ";  
  color: red;      
}

Demo

Upvotes: 3

Qiqi Abaziz
Qiqi Abaziz

Reputation: 3353

You can use some tricks here that using :before pseudo elements

ol li{
    list-style:none;
    counter-increment:li;
    color:#27ae60;
}
ol li:before{
    content:counter(li, decimal-leading-zero)'.';
    color:#c0392b;
    padding-right:5px;
}

Have a look at the demo HERE.

Upvotes: 0

thirdender
thirdender

Reputation: 3951

The following CSS should do the trick:

ol {
  list-style: none;
  counter-reset: count;
  margin: .8em 0;
  padding: 0; }
  ol ol {
    margin: 0; }
  ol li {
    margin: 0;
    padding: 0 0 0 2em; }
    ol li:before {
      counter-increment: count;
      content: counter(count, decimal-leading-zero) ".\00a0";
      display: inline-block;
      min-width: 2em;
      margin-left: -2em;
      text-align: right;
      color: red; }

jsFiddle Demo

This solution relies on CSS Counters to keep track of the decimal number that should be displayed. content: counter(count) ".\00a0"; outputs the current value of the count counter, followed by a period and non-breaking space. The :before psuedo-element is styled as an inline-block element and a negative margin pulls it to the left onto the LI padding.

Upvotes: 0

Scott Bartell
Scott Bartell

Reputation: 2840

What about something like this:

ol {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}
li {
    display: block;
    margin-bottom: .5em;
    margin-left: 2em;
}
li:before {
    display: inline-block;
    color: red;
    content: counter(item, decimal-leading-zero);
    counter-increment: item;
    width: 2em;
    margin-left: -2em;
}

Here's a working example.

Upvotes: 0

Sudz
Sudz

Reputation: 4308

Use this

ol {color: #ff0000;}
ol li { color: #000000; }

Upvotes: 0

Related Questions