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

Question

在数学教科书中，常见的做法是在难题后加上星号。有时您甚至会看到双星号或匕首符号来表示真正困难的练习。

那么，在网页上实现这种效果最干净的方式是什么？我希望只使用CSS就可以实现，因此HTML代码应该如下所示：

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

如果有任何人感兴趣，这里是关于此问题的 TeX.SE 版本。

- Mike Pierce

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>

- StefanBob

---

这个工作非常出色。谢谢！不过我很惊讶，居然没有比在数字后面添加星号，然后用负移位来移动它更优雅的方法。 - Mike Pierce

确实。不幸的是，目前没有办法使用CSS定位有序列表的数字，否则我们可以将:before放在该数字上。但是也许其他人有更优雅的解决方案。 - StefanBob

哦，有趣的一点是，如果您使用HTML实体（如⋆）而不是像“*”这样的字符，则它将显示文字“⋆”而不是星号。您是否知道如何解决这个问题？ - Mike Pierce

使用Unicode版本的22C6，并且必须进行转义，所以 content: "\22C6";。 - StefanBob

Answer 2

为了在项目编号前面加上符号，您可以使用以下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>

- user2012084

Answer 3

这个解决方案使用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>
    

- t..

---

希望这能有所帮助！ - t..

这似乎是将星号放在列表项的内容之前，而不是在项目编号之前。因此，它看起来像2. * Hard Exercise。有没有办法将星号放在数字本身之前？ - Mike Pierce

@MikePierce 哦，我的错，让我看看。 - t..

@MikePierce 这是修复后的版本 :) - t..

现在，您如何使用custom-counter将计数器右对齐？ 沿着句点对齐吗？ - Mike Pierce

@MikePierce 我在它们上面添加了 position:absolute，然后使用特定的 left:28px; 来对齐它们。 - t..