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