How to create a break in a numbered list in HTML

Question

I am looking to create an alphabetized numbered list (which is fairly easy), however I am looking to add a break in the numbers for a place to add the letters (A, B, C, etc) however keep the chronology of the numbers.

I know that I could do the numbering myself and have no issue, however I want the numbers to automatically adjust as I add items. Hopefully someone can tell me how to do this in HTML.

Essentially this is what I would like it to look like:

A

Air Force One
Aladdin
Amazing Spider-Man

B

Back to the Future
Batman Returns
Beverly Hills Cop

C

Club Paradise

I believe this will work:
That would be for the second list. — rrd, Jan 06 '17 at 09:30
why not try the following (with empty li) `

2nd line

` with the comment from @rrd this should work — Bee157, Jan 06 '17 at 09:31

score 4 · Answer 1 · answered Jan 06 '17 at 09:36

You can use the start attribute of the ol tag, like this:

<h2>A</h2>
<ol>
  <li>Air Force One</li>
  <li>Aladdin</li>
  <li>Amazing Spider-Man</li>
</ol>

<h2>B</h2>
<ol start="4">
  <li>Back to the Future</li>
  <li>Batman Returns</li>
  <li>Beverly Hills Cop</li>
</ol>

<h2>C</h2>
<ol start="7">
  <li>Club Paradise</li>
</ol>

Bee157 · Answer 2 · 2017-01-06T10:29:39.440

following code should do the trick without JS:

ol.start { 
    counter-reset: mycounter; 
}
ol.start li, ol.continue li {
    list-style: none;
}
ol.start li:before, ol.continue li:before { 
    content: counter(mycounter) ") "; 
    counter-increment: mycounter;
    position:relative;
    text-align: right;
    width:25px;
    display:block;
    float:left;
    left:-30px;
}

  <ol type="A">
    <li></li>
    <ol class='start'>
    <li>2nd line</li>
      <li>2nd line</li>
      <li>2nd line</li>
      <li>2nd line</li>
    </ol>
    <li></li>
    <ol  class='continue'>
    <li>2nd line</li>
      <li>2nd line</li>
      <li>2nd line</li>
    </ol>
      <li></li>
    <ol  class='continue'>
    <li>2nd line</li>
      <li>2nd line</li>
      <li>2nd line</li>
    </ol>
    </ol>

score 0 · Answer 3 · answered Jan 06 '17 at 09:47

Try this

  var entityAlpha = 65;
 $('li').each(function(i,e){
   if(i%3 === 0){
     $(this).css('position', 'relative');
     $(this).append('<span class="alpha">&#'+entityAlpha+';</span>');
     entityAlpha = entityAlpha+1;
   }
 });

/* Put your css in here */

ol li:nth-child(3n){
  margin-bottom:40px;
}
.alpha{
  left:-25px;
  top:-30px;
  position:absolute;
  font-weight: bold;
}

ol{
  margin-top:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<ol>
       <li> Air Force One</li>
        <li>Aladdin</li>
        <li>Amazing Spider-Man</li>
        <li>Back to the Future</li>
        <li>Batman Returns</li>
        <li>Beverly Hills Cop</li>
        <li>Club Paradise</li>
    </ol>

How to create a break in a numbered list in HTML

3 Answers3