Building an HTML list with custom text for each label

Question

I have a list where I need to create the (rather odd) structure:

1.1. 
    1.1.1. 
    1.1.2. 
    1.1.3. 
2. 
    1.1.4. 
    1.1.5. 
    1.1.6. 
3. 
4.

My working structure is:

<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
</ol>

I could just work around it and not use a list element (laying it out manually). But I was wondering if it's possible with standard <li> elements, to set specific string values for the label of each item.

I have tried using the <li value=""></li> syntax, but it only seems to work for integers.

To point out the key differences between this and a normal list:

The top level list uses two different label "types" ("1.1" for the first, "2" for the second)
The sub items in the second top level menu item follow on from those in the first list item.
There are only two list "levels", but the sub menu items have 3 digit labels.

Is there any built in solution for list labels in structures that don't follow a numerical pattern?

Not sure that this is a duplicate given the second `li` begins with `4, 5, 6...` — sol, Oct 13 '17 at 11:49
@Paulie_D I don't believe that question is a duplicate. There are several key differences: The route list uses two different label "types" (`1.1` for the first, `2` for the second) The sub items in the second top level menu follow on from those in the first list item. And lastly there are only two list "levels", but the sub menu items have 3 digit labels. None of which are covered by the linked question. — DBS, Oct 13 '17 at 13:04

Wouter Vandevelde · Answer 1 · 2017-10-13T11:50:56.593

2

You can using counters.

Example:

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

 <ol>
  <li>one</li>
  <li>two
  <ol>
   <li>two.one</li>
   <li>two.two</li>
   <li>two.three</li>
  </ol>
     </li>
  <li>three 
  <ol>
   <li>three.one</li>
   <li>three.two</li>
    <ol>
     <li>three.two.one</li>
     <li>three.two.two</li>
    </ol>
   </ol>
     </li> 
  <li>four</li>
</ol>

edited Oct 13 '17 at 11:50

answered Oct 13 '17 at 11:38

Wouter Vandevelde

894
9
16

I appreciate the answer, but I don't think I can use counters to achieve the pattern shown in the question. I've added some points to the question to try and highlight the issues. – DBS Oct 13 '17 at 13:10

score 1 · Accepted Answer · answered Oct 13 '17 at 11:46

Would something like this work for you?

ol li ol {
  margin-left: 2.5em;
}

ol li ol li:before {
  content: "1.1.";
  margin-left: -2.5em;
}

<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li>
    <ol start="4">
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
</ol>

Building an HTML list with custom text for each label

2 Answers2