Can you have an HTML list where you choose the number value of each individual bullet?-CodePudding

I need to be able to generate an HTML list like

(1) sdkfljsdlkfj

(4) lksdfjlksjdf

(2) lksdjfklsdjf

(7) sdklfjlskdfj

(16) sdklfjhlskdjf

The parentheses aren't necessary, it was just the only way for the Stack Overflow text editor to not auto-format the list. The only thing that matters is that the bullets need to be numbered, but for the numbers to be what I choose and potentially out of order.

I don't even know what to call this type of list concisely, and generally googling about how to do ordered and unordered HMTL lists doesn't give any hints about this.

If you're wondering why I need this, it's because this data comes to my website with Javascript and it's different line items based on a selection request. I'd like to display them in a list, but retain the original values.

Right now, I'm doing an unordered list where the number is in the beginning of the item text, but it doesn't look too great, compared to what I have in mind.

1. sdkfljsdlkfj
4. lksdfjlksjdf
2. lksdjfklsdjf
7. sdklfjlskdfj
16. sdklfjhlskdjf

Does HTML allow this? Something like <li bulletValue=24> ... </li> would be the most convenient.

CodePudding user response：

You would use the value attribute on the li items in the ordered list. See the example below.

<ol>
  <li value="1">Item in the list</li>
  <li value="3">Item in the list</li>
  <li value="6">Item in the list</li>
  <li value="9">Item in the list</li>
  <li value="67">Item in the list</li>
</ol>

CodePudding user response：

Use CSS along with a data-attribute:

.data-bullet-list {
  list-style-type: none;
}

.data-bullet-list li::before {
  content: "("attr(data-bullet)") ";
}

<ul >
  <li data-bullet="1">Item
  <li data-bullet="4">Item
  <li data-bullet="2">Item
  <li data-bullet="7">Item
  <li data-bullet="16">Item
</ul>