Can I Style Numbering An Ordered List That Has A Start Attribute Value?

Here's the problem: I have an ol li ordered list with a start attribute like so: I get the following output on the browser: Is it possible to serialize the list-style numbering o

Solution 1:

You can simulate this using CSS variable that you set instead of start and use it to reset the counter. For semantic purpose you can also keep start attribute.

.custom {
  margin: 0;
  padding: 0;
  list-style-type: none;
  counter-reset: step-counter calc(var(--start) - 1);
}

.customli {
  counter-increment: step-counter;
  margin-bottom: 10px;
}

.customli::before {
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  background-color: rgb(0, 200, 200);
  color: white;
  font-weight: bold;
  padding: 3px8px;
  border-radius: 3px;
}

<olstyle="--start:6"start="6"class="custom"><li>This is the sixth item</li><li>This is the seventh item</li><li>This is the eighth item</li><li>This is the ninth item</li><li>This is the tenth item</li></ol>

Solution 2:

li tag have no access to parent attribute.

This is the best way i saw, using content: attr()

.custom {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    
    .customli {
      counter-increment: step-counter;
      margin-bottom: 10px;
    }
    
    .customli::before {
      content: attr(data-idx);
      margin-right: 5px;
      font-size: 80%;
      background-color: rgb(0,200,200);
      color: white;
      font-weight: bold;
      padding: 3px8px;
      border-radius: 3px;
    }

<olclass="custom"><lidata-idx="6">This is the sixth item</li><lidata-idx="7">This is the seventh item</li><lidata-idx="8">This is the eighth item</li><lidata-idx="9">This is the ninth item</li><lidata-idx="10">This is the tenth item</li></ol>

Solution 3:

I've added a few rules to your CSS. The most important is this:

.custom{counter-reset:start 5;} 

This will make the list to start at 5+1 = 6

.custom {
  margin: 0;
  padding: 0;
  list-style-type: none;
  counter-reset:start 5;/*This*/
}

.customli {
  counter-increment: step-counter;
  margin-bottom: 10px;
  counter-increment: start;/*This*/
}

.customli::before {
  content:counter(start);/*This*/margin-right: 5px;
  font-size: 80%;
  background-color: rgb(0,200,200);
  color: white;
  font-weight: bold;
  padding: 3px8px;
  border-radius: 3px;
}

<olclass="custom"><li>This is the sixth item</li><li>This is the seventh item</li><li>This is the eighth item</li><li>This is the ninth item</li><li>This is the tenth item</li></ol>

Solution 4:

Here is my jank solution.

Prepend with js x li's at the beginning of the ol. Then hide them by positionning them absolute and throwing them to the moon.

$('ol[start]').each(function(){
    var start = $(this).attr('start');
    //console.log(start);for(var i=1;i<start;i++){
        $(this).prepend('<li class="hidden"></li>');
    }
})

ol{
  counter-reset: items;
  padding:0;
  padding-left: 46px;
}
olli {
  display: block;
  counter-increment: items;
  text-indent: -22px;
  margin-bottom: 25px;
}

olli.hidden{
  visibility:hidden;
  position:absolute;
  left:-999vw;
}

olli:before {
    content: "0"counter(items)". ";
    color:green;
    display:inline-block;
    width:22px;
    font-size:14px;
}

olli:nth-child(n+10):before {
    content: ""counter(items)". ";
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><olstart="4"><li>Item 4</li><li>Item 5</li><li>Item 6</li><li>Item 7</li><li>Item 8</li><li>Item 9</li><li>Item 10</li></ol>