Numbered list-groups with start attribute do not count correctly.

[petschki]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Numbered lists with a start attribute as offset do not count correctly. For example

<ol class="list-group list-group-numbered" start=10>
  <li class="list-group-item">ten</li>
  <li class="list-group-item">eleven</li>
</ol>

start counting from 1

Reduced test cases

A second value for counter-reset fixes the offset, but I do not know how to set this dynamically:

ol.list-group-numbered[start] {
  counter-reset:section 9;
}

What operating system(s) are you seeing the problem on?

Windows, macOS, Android, iOS, Linux

What browser(s) are you seeing the problem on?

Chrome, Safari, Firefox, Microsoft Edge, Opera

What version of Bootstrap are you using?

v5.2.2

[mdo]

https://codepen.io/emdeoh/pen/WNyeNeQ works for me

[petschki]

Sorry, its not about <ol>s its about the CSS class .list-group-numbered which cannot have a offset right now. As long as its documented I'm ok with it.

[petschki]

see https://codepen.io/petschki/pen/MWXgjBx

[mdo]

Oh my bad! Reopening.

[nkdas91]

My two cents! We can use CSS variables.

<ol start="10" class="list-group list-group-numbered" style="--list-start: 10;">
  <li class="list-group-item">list item</li>
  <li class="list-group-item">list item</li>
  <li class="list-group-item">list item</li>
  <li class="list-group-item">list item</li>
</ol>

.list-group-numbered {
  counter-reset: section var(--list-start, 0) !important;
}

https://codepen.io/nkdas91/pen/xxzxXjE

[matedon]

My two cents! We can use CSS variables.

<ol start="10" class="list-group list-group-numbered" style="--list-start: 10;">
  <li class="list-group-item">list item</li>
  <li class="list-group-item">list item</li>
  <li class="list-group-item">list item</li>
  <li class="list-group-item">list item</li>
</ol>

.list-group-numbered {
  counter-reset: section var(--list-start, 0) !important;
}

https://codepen.io/nkdas91/pen/xxzxXjE

Ok. Your solution is a good idea but you need a -1.
Here you can see how: https://codepen.io/matedon/pen/LYqjJVm
.list-group-numbered { counter-reset: section calc(var(--list-start, 1) - 1) !important; }