Search code examples
htmlcss

html list order type like a sub-list


How to create html list with a custom starting point and a order as I would apply sub-list like in the snippet below (but hide number of the outer list nd align test as default in outer list).

The result should look like

1.1 Item...
    ...some Text...
1.2 Item
1.3 Item

or

2.1 Item
2.2 Item
    Item...
    ...some Text...
2.3 Item

depends on the starting point.

ol {
  counter-reset: section;
  list-style-type: none;
} 
li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}
 
  <ol start="2">
    <li>
      <ol>
        <li>Item<br>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ol>
    </li>
  </ol>


Solution

  • following Alohci answer, and the update in your question about text alignment:

    ol {
      list-style-type : none;
      padding         : 0;
      margin-bottom: 1em;
      } 
    ol ol {
      padding-left    : 3em;
      } 
    ol ol li { 
      text-indent    : -2em; /* the first line "trick" */
      padding-bottom : .4em;
      }
    ol ol li::before { 
      content : counters(list-item, '.') ' ';
      }
    <ol start="2">
      <li>
        <ol>
          <li>hello<br>world<br>...more text</li>
          <li>Item</li>
          <li>Item</li>
        </ol>
      </li>
      <li>
        <ol>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
        </ol>
      </li>
    </ol>

    [memo] ->fist answer of mine

    ol {
      counter-reset   : section;
      list-style-type : none;
    } 
    ol li::before {
      counter-increment : section;
      content           : var(--start) counter(section) ' ';
    }
    <ol style="--start: '2.';">
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ol>

    third one:

    ol {
      list-style-type : none;
      padding         : 0 0 0 3em;
      
      & > li { 
        text-indent    : -2em;
        padding-bottom : .5em;
        }
        
      & > li::before { 
        content : var(--prefix) counter(list-item) ' ';
        }  
      }
    <ol style="--prefix: '2.';">
      <li>hello<br>world<br>...more text</li>
      <li>Item</li>
      <li>Item</li>
    </ol>

    fourth one (and last I hope):

    ol {
      list-style-type : none;
      padding         : 0;
      counter-reset   : section;
    
      & > li { 
        display           : flex;
        align-items       : stretch;
        margin-bottom     : .6em;
        counter-increment : section;
        }  
     
      & > li::before { 
        display       : block;
        padding-right : .4em;
        content       : var(--prefix) counter(section);
        }  
      }
    <ol style="--prefix: '2.';">
      <li>hello<br>world<br>...more text</li>
      <li>Item</li>
      <li>Item</li>
    </ol>