Search code examples
htmlcsshtml-lists

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

It's common practice in math textbooks to add an asterisk to indicate a difficult exercise. And occasionally you'll even see a double-asterisk or a dagger to indicated a really tough exercise.

Example of a starred and non-starred exercise

What's the cleanest way to get this same effect on a webpage? I hope that there's a nice way to do this with just CSS, so the HTML can look like this:

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

For anyone interested, here's the TeX.SE version of this question.

Solution

  • 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>