css 自定义彩色编号列表

Posted 2021-05-13

/*  We first set it to zero on the OL element: */
ol { 
  list-style: none;
  counter-reset: li;
}

/*  Then, insert the content, set the color, and adjust the positioning */
li::before {
  content: counter(li);
  color: red;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

/*  As it is our own counter, we're responsible for augmenting it as well: */
li {
  counter-increment: li;
}

/* Make some alignment tweaks  */
.example ol li::before {
  content: counter(li);
  color: red;
  display: inline-block;
  width: 1em;
  margin-left: -1.5em;
  margin-right: 0.5em;
  text-align: right;
  direction: rtl;
}