Question 383875 in Html Question posted in
Some basic documentation can be found here.

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>
Tags:

2

Answers


  1. 0

    you mean this ?

    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>
    Login or Signup to reply.
  2. 0

    If you want to use the value of the start attribute, you can use the built-in counter "list-item". So:

    ol {
  list-style-type: none;
  margin-bottom: 1em;
} 

ol ol li::before{
  content: counters(list-item, ".") " ";
}
    <ol start="2">
  <li>
    <ol>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ol>
  </li>
  <li>
    <ol>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ol>
  </li>
</ol>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search