2

I want to find out whether it is possible to make out the markers to create a counter.

Just what I was able to achieve can be seen here: http://jsfiddle.net/Jeen/w6V74/1/

ol { 
  counter-reset: level-1; 
  list-style: none; 
  padding-left: 0;
} 
ol li:before { 
  counter-increment: level-1; 
  content: counter(level-1) '. ';
} 


ol ol { 
  counter-reset: level-2; 
  padding-left: 15px;
}
ol ol li:before { 
  counter-increment: level-2; 
  content: counter(level-1) '.' counter(level-2) '. ';
}


ol ol ol { 
  counter-reset: level-3; 
  padding-left: 30px;
} 
ol ol ol li:before { 
  counter-increment: level-3; 
  content: counter(level-1) '.' counter(level-2) '.' counter(level-3) '. '; 
}

enter image description here

In the end, I want to get what is shown in the second image

enter image description here

Cœur
  • 37,241
  • 25
  • 195
  • 267
Jeen Jay
  • 416
  • 4
  • 8

2 Answers2

1

Here is one way of styling the indentations.

Modify your CSS by adding the following rules: 

ol > li {
    padding-left: 1.0em;
    position: relative;
}
ol > ol > li {
    padding-left: 2.0em;
    position: relative;
}
ol > ol > ol > li {
    padding-left: 3.0em;
    position: relative;
}
ol li:before { 
    counter-increment: level-1; 
    content: counter(level-1) '. ';
    position: absolute;
    left: 0;
}

Take the generated content (ol li:before) out of the regular flow by using position: absolute.

The trick is to add some padding to the left with a suitable length to accommodate the counter label.

For each list item (ol>li, ol>ol>li, ol>ol>ol>li), set the padding-left to 1.0em, 2.0em, 3.0em respectively (or some similar values) and use position: relative to allow the generated content elements to be positioned with respect to the appropriate li parent element.

See fiddle: http://jsfiddle.net/audetwebdesign/m2vZd/

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
  • @JeenJay Either way is good, CSS table-cells are a good option and a bit easier to implement in this situation. – Marc Audet May 14 '14 at 18:53
1

You might want to check this page and change the way to nest your <ol>:
Proper way to make HTML nested list?

After you properly nest the list, add css below:

ol {
    display: table;
}
ol > li {
    display: table-row;
}
ol > li::before {
    display: table-cell;
}

DEMO: http://jsfiddle.net/naokiota/95xha/

Hope this helps.

Community
  • 1
  • 1
naota
  • 4,695
  • 1
  • 18
  • 21