How to add a character to decorate the numbers of an ordered list in HTML

Solution if you want asterick next to number, and also for double digits

ul {
  background-color: red;
}

li {
  position: relative;
}

li.hard:before {
  content: "*";
  position: absolute;
  left: -25px;
}

li.hard:nth-of-type(n+10):before {
  left: -33px;
}

<ol>
  <li> Easy Exercise </li>
  <li class="hard"> Hard Exercise </li>
  <li class="hard"> Hard Exercise </li>
  <li class="hard"> Hard Exercise </li>
  <li class="hard"> Hard Exercise </li>
  <li> Easy Exercise </li>
  <li> Easy Exercise </li>
  <li class="hard"> Hard Exercise </li>
  <li class="hard"> Hard Exercise </li>
  <li class="hard"> Hard Exercise </li>
  <li class="hard"> Hard Exercise </li>
  <li> Easy Exercise </li>
  <li class="hard"> Hard Exercise </li>
  <li class="hard"> Hard Exercise </li>
  <li class="hard"> Hard Exercise </li>
  <li class="hard"> Hard Exercise </li>
  <li> Easy Exercise </li>

</ol>

To get the symbol out in front of the item number, you can use the following CSS that styles the counters from scratch. By setting display: block; it no longer automatically generates list item numbers and then you can use the ::before selector to insert those yourself. A little bit of beautification might be needed afterwards.

ol {
  counter-reset: item;
}
li {
  display: block;
  margin-bottom: .5em;
  margin-left: 2em;
}
li::before {
  display: inline-block;
  content: "  " counter(item) ".";
  counter-increment: item;
  width: 2em;
  white-space: pre;
}
li.hard::before {
  content: "*" counter(item) ".";
}

<ol>
  <li> Easy Exercise </li>
  <li class="hard"> Hard Exercise </li>
</ol>

This solution uses ol class custom-counter to get the numbers for each row instead of the standard numbers li gives. This is so we can append that * before the #

 
<style>
  .custom-counter {
     margin-left: 0;
     padding-right: 0;
     list-style-type: none;
   }
   .custom-counter li {
     counter-increment: step-counter;
   }

   .custom-counter li::before {
     content: ""counter(step-counter)".";
 left: 28px;
  position: absolute;
   }
   li.hard:before { 
     content: "*"counter(step-counter)".";
    left: 20px;
     
     
   }
</style>
   
<ol class="custom-counter">
  <li> Easy Exercise </li>
  <li class="hard"> Hard Exercise </li>
  <li> Easy Exercise </li>
  <li> Easy Exercise </li>
  <li> Easy Exercise </li>
  <li> Easy Exercise </li>
  <li class="hard"> Hard Exercise </li>
  <li class="hard"> Hard Exercise </li>
  <li> Easy Exercise </li>

</ol>

How to add a character to decorate the numbers of an ordered list in HTML

Related

Recent Posts