Html 附加点的列表样式

发布于01月24日

我正在寻找一个css属性或列表样式，将能够显示一个不断增加的大小的列表.像这样的东西

Buy now to get a discount!

<ol style="list-style: none">
  <li>* Only available for the first 12 months</li>
  <li>** Only available for new customers signing up for a paid plan</li>
</ol>

在我的特定情况下，有<li>个标记的任意数量，所以如果CSS样式可以处理增加每行的星号数量，而不需要我自己进行硬编码或计算，那就最好了.

推荐答案

你不需要嵌套列表.只需使用符号计数器样式即可:

@counter-style asterisks {
  system: symbolic;
  symbols: "*";
  suffix: " ";
}

ol { 
  list-style: asterisks inside;
  padding-inline-start: 0;
}

<ol>
  <li>Only available for the first 12 months</li>
  <li>Only available for new customers signing up for a paid plan</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ol>