Ordered List markdown (start="0") doesn't work with counter-increment-CodePudding

I'm trying to make my styled ordered list start at '0'. Without the styling, this works using start="0" set on the ol but due to the custom styling and using counter-increment: li; and content: counter(li); ...it isn't picked up.

It's worth nothing that the CSS below works perfectly for everyone other instance of this list it's just in one particular place I need it to start at '0' due to the context.

Is there away to rework my CSS so it uses start if added? I'd prefer not to have a modifier or new class just for the one instance this is needed in.

body {
  padding: 32px;
}

.list-numbers {
  counter-reset: li;
  /* [1] */
  line-height: 1.25;
  list-style: none;
  /* [2] */
}
.list-numbers > li {
  display: block;
  min-height: 24px;
  margin-bottom: 12px;
  padding-left: 32px;
  position: relative;
  text-decoration: none;
  text-shadow: none;
}
.list-numbers > li:before {
  background: black;
  border-radius: 100%;
  color: white;
  content: counter(li);
  counter-increment: li;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  height: 24px;
  line-height: 14px;
  margin: 0 8px 0 -32px;
  position: relative;
  top: -2px;
  width: 24px;
}

<ol  start="0">
  <li>Health and safety when working with food</li>
  <li>Legislation relating to food and cookery</li>
  <li>Food groups and nutrients that make up a balanced diet</li>
  <li>Factors that can affect food choices</li>
  <li>Food preparation and cooking skills</li>
  <li>Recipe development</li>
</ol>

CodePudding user response：

This is an alternative solution. Instead of using start="0" you can have a class .list-numbers__start-0 that resets the list numbering in the css. Hope this can help you!

.list-numbers {
  counter-reset: li;
  /* [1] */
  line-height: 1.25;
  list-style: none;
  /* [2] */
}
.list-numbers__start-0 {
  counter-reset: li -1;
}
.list-numbers > li {
  display: block;
  min-height: 24px;
  margin-bottom: 12px;
  padding-left: 32px;
  position: relative;
  text-decoration: none;
  text-shadow: none;
}
.list-numbers > li:before {
  background: black;
  border-radius: 100%;
  color: white;
  content: counter(li);
  counter-increment: li;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  height: 24px;
  line-height: 14px;
  margin: 0 8px 0 -32px;
  position: relative;
  top: -2px;
  width: 24px;
}

<ol >
  <li>Health and safety when working with food</li>
  <li>Legislation relating to food and cookery</li>
  <li>Food groups and nutrients that make up a balanced diet</li>
  <li>Factors that can affect food choices</li>
  <li>Food preparation and cooking skills</li>
  <li>Recipe development</li>
</ol>

Update

You can also use data attributes instead of the class to do the same thing (see below), but I would recommend the class approach since the value of the start attribute doesn't do anything.

.list-numbers[start="0"] {
  counter-reset: li -1;
}

<ol  start="0">...</ol>