CODEWITHSUNDEEP
htmlcsshtml-lists
SirJord
SirJord

Reputation: 123

HTML Complex list item with number+letter

How to accomplish this:

  1. lorem ipsum
  2. lorem ipsum
 2a. lorem ipsum
  3. lorem ipsum
 4a. lorem ipsum

html: (I cannot expose the text so I'm using lorem)

   <ol>
     <li>lorem ipsum 1</li> <--- 1
     <li>lorem ipsum 2 </li> <--- 2
     <li class="number-alpha">lorem ipsum 2a</li> <--- 2a
     <li>lorem ipsum 3</li> <--- 3
     <li class="number-alpha">lorem ipsum 4a</li> <--- 2a
   </ol>

as you can see the 2a is a different situation then the 4a, but I need to solve both situations in one ordered list and use CSS instead of JS or Jquery. The reason why you have 2 and 2a is because 2a is an exceptional message of 2 for a different user. the reason why its 4a instead of 3a is because 4a isn't an exceptional message but its information for a different user (it needs to be shown in the same list)

Upvotes: 0

Views: 692

Answers (1)

Paul Lemarchand
Paul Lemarchand

Reputation: 2096

this is what I came with (pretty proud of this one I gotta admit) :

ul {
    counter-reset:yourCounter;
}
ul li {
  list-style:none;
}
ul li:not(.sub) {
    counter-increment:yourCounter;
}
ul li:before {
    content:counter(yourCounter) ". ";
}
ul li.sub:before, ul li.subskip:before {
    content:counter(yourCounter) "a. ";
}
<ul>
  <li>lorem ipsum</li>
  <li>lorem ipsum</li>
  <li class="sub">lorem ipsum</li>
  <li>lorem ipsum</li>
  <li class="subskip">lorem ipsum</li>
</ul>

Upvotes: 1

Related Questions