如何在HTML中添加字符来装饰有序列表的数字

Question

在数学教科书中，通常的做法是添加一个星号来表示一项困难的练习。有时，您甚至会看到双星号或匕首来表示真的艰苦的锻炼。

在网页上获得相同效果的最干净方法是什么？我希望有一种很好的方法可以仅使用CSS来做到这一点，因此HTML可以如下所示：

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

对于感兴趣的人，这里是Tex.SE version of this question。

Answer 1

解决方案，如果您想在数字旁边加上星号，也要对两位数

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>

Answer 2

此解决方案使用ol类custom-counter来获取每一行的数字，而不是li给出的标准数字。因此，我们可以在＃

之前附加*

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

Answer 3

要使符号位于项目编号的前面，可以使用以下CSS从头开始对计数器进行样式设置。通过设置display: block;，它不再自动生成列表项编号，然后您可以使用::before选择器自己插入这些编号。之后可能需要一点美化。

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>