javascript - 有序列表中的 2 个不同标记

Question

我收到这个作为元素模型的一部分来实现，但是当涉及到这个时，我不知道如何实现它。

我有一个有序列表，其中有 2 个带有样式点的不同标记，有谁知道如何实现这一点。

这是它应该是什么样子的截图

下面是一段代码

.pj__list {
  padding-left: inherit;
  li {
    font-weight: bold;
  }
  li::marker {
    content: #{$dot} counter(list-item) ". ";
  }
}

<ol class="pj__list">
  <li class="my-2"> Bulletin de salaire </li>
  <li class="my-2"> Copie de la CIN </li>
  <li class="my-2"> Attestation de travail </li>
</ol>

Answer 1

您可以将列表样式更改为元素符号，然后为您的数字使用计数器:

.pj__list {
  list-style-type: disc;
  counter-reset: list;
}

.my-2 {
  counter-increment: list;
  padding-left: 1.5em;
}

.my-2:before {
  content: counter(list) ".";
  display: inline-block;
  width: 1.5em;
  margin-left: -1.5em;
}

<ol class="pj__list">
  <li class="my-2">Bulletin de salaire</li>
  <li class="my-2">Copie de la CIN</li>
  <li class="my-2">Attestation de travail</li>
</ol>

如果您需要圆盘的颜色不同，则需要添加跨度:

.pj__list {
  list-style-type: disc;
  counter-reset: list;
}

.my-2 {
  color: orange;
}

.my-2 span {
  color: black;
  display: inline-block;
  counter-increment: list;
  padding-left: 1.5em;
}

.my-2 span:before {
  content: counter(list) ".";
  display: inline-block;
  width: 1.5em;
  margin-left: -1.5em;
}

<ol class="pj__list">
  <li class="my-2"><span>Bulletin de salaire</span></li>
  <li class="my-2"><span>Copie de la CIN</span></li>
  <li class="my-2"><span>Attestation de travail</span></li>
</ol>