HTML list with custom decimal numbers using value of li

Question

I need to display a list like this:

1.      something ......
        aligned like this
1.1.    next something
1.1.1.  next
2.      something
3.      next something

As shown above,I want to list the items with custom numbers (from php code) and proper alignment

Here is what I've tried

<ol>
<li value="1">something<br/>aligned like this</li>
<li value="1.1">next something</li>
<li value="1.1.1">next</li>
<li value="2">something</li>
<li value="3">next something</li>
</ol>

But I'm not getting whole numbers only and no decimal points. Does anyone have a solution for this?

You can specify only integers for the LI value attribute to begin with - this does not take any “decimals.” The proper way to do this, would be to use _nested_ lists, when you want multiple _levels_ of hierarchy, and then to use CSS generated content to display the counter value. — CBroe, Mar 08 '21 at 09:44
I think you can do it with recursivity loop who's concatenating but you need to set a variable for depth. — Astro-Otter, Mar 08 '21 at 09:44
@mplungjan the question says *I want to list the items with custom numbers (from php code)* <-- **custom numbers** — Temani Afif, Mar 08 '21 at 09:48
So not a [dupe of this](https://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1) ? — mplungjan, Mar 08 '21 at 09:50
@mplungjan not really since that one will create a well structured list with counters (they will follow an incrementation logic) — Temani Afif, Mar 08 '21 at 09:52

score 4 · Accepted Answer · answered Mar 08 '21 at 09:46

Simply use attr() with content and a table layout for the alignment

ol {
  list-style: none;
}

li {
  display: table-row;
}

li:before {
  content: attr(value)".";
  display: table-cell;
  padding-right: 5px;
}

<ol>
  <li value="1">something<br/>aligned like this</li>
  <li value="1.1">next something</li>
  <li value="1.1.1">next</li>
  <li value="2">something</li>
  <li value="3">next something</li>
</ol>

HTML list with custom decimal numbers using value of li

1 Answers1