With CSS, can an ordered list give a result that looks like 1.1, 1.2, 1.3 (rather than just 1, 2, 3,…)?

Problem

Is it possible to use CSS to make an ordered list seem like 1.1, 1.2, 1.3 (rather than just 1, 2, 3,…)? So far, list-style-type:decimal has only produced 1, 2, 3, rather than 1.1, 1.2, and 1.3.

Asked by Richard77

Solution #1

You can accomplish so by using counters:

Example

For further details, see Nested counters and scope.

Answered by Gumbo

Solution #2

None of the answers on this page work for all levels and long (wrapped) paragraphs in the same way. Due to the varied size of the marker (1., 1.2, 1.10, 1.10.5, etc. ), it’s difficult to establish a consistent indentation; it can’t be “faked,” even with a pre-calculated margin/padding for each potential indentation level.

I’ve finally come up with a solution that works and doesn’t require any JavaScript.

It has been tested on Firefox 32, Chromium 37, Internet Explorer 9, and the Android Browser. Doesn’t function in Internet Explorer 7 and before.

CSS:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

Example:

Try it out on JSFiddle, and then fork it on Gist.

Answered by Jakub Jirutka

Solution #3

The suggested solution is a good start, however it forces list-style-position: inside; styling on the list items, making wrapped text difficult to see. Here’s a quick fix that provides you control over the margin between the number and the text, as well as right-aligns the number like it should.

ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

JSFiddle: http://jsfiddle.net/3J4Bu/

Answered by slightlyfaulty

Solution #4

Because the solutions offered here didn’t work for me, I combined them with the ones from the next question: Is it feasible to make an ordered list with multiple levels in HTML?

/* Numbered lists like 1, 1.1, 2.2.1... */
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */

Result:

Note that the screenshot is from this post: http://estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html if you want to see the source code or something.

Answered by chelder

Solution #5

In a modern browser, use CSS counters to generate nested numbering. Look at the accepted response. The following information is provided solely for historical purposes.

If your browser allows content and counters, go ahead and use them.

Answered by kennytm

Post is based on https://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1